I want to create two DIVs, a container DIV (which contains arbitrary content) and an arrow DIV which allows the user to scroll the content horizontally.
Ignoring the Javascript aspect, the basic layout and CSS could be something like:
<!DOCTYPE html>
<html>
<head>
<style>
.outer-wrapper {
min-width:275px;
overflow: hidden;
border: 1px solid #000000;
height: 40px;
}
.container {
width: 90%;
min-width:100px;
margin-left: 0.5em;
margin-right: 0.5em;
height: 40px;
overflow: hidden;
white-space: nowrap;
float: left;
}
.inner-content {
margin-top: 10px;
white-space: no-wrap;
position: relative;
display: inline-block;
white-space: nowrap;
}
.inner-element {
display: inline-block;
}
.arrow {
margin-top: 12px;
min-width: 30px;
font-size: 10px;
text-align: right;
margin-right: 2px;
}
</style>
</head>
<body>
<div class = "outer-wrapper">
<div id = "container" class = "container">
<div class = "inner-content" id = "inner-content">
Options Options Options Options Options Options Options Options Options
</div>
</div>
<div id = "arrow" class = "arrow">
▶
</div>
</div>
</body>
</html>
Here's a jsfiddle link showing the rendering: http://jsfiddle.net/RSTE9/1/
The problem I have is that, ideally, I'd like the DIV containing the arrow to be as small as possible, so that most the width of the screen is comprised of the container DIV.
To achieve this, I thought I'd set the container DIV to a width of like 98%, and the arrow DIV to a width of like 2%. Unfortunately, this causes the arrow DIV to wrap to the next line on smaller screen sizes.
The essential problem is that I want the arrow DIV to always take up a very small portion of the screen, but I can't find a way to do this using percentages. If the screen width is large, the arrow DIV always takes up too much space. But if the screen width is very small (say on a mobile device), the arrow DIV might be pushed to the next line. I played around with different percentage values, but there's seemingly no way to get an ideal value. I settled at a width of 90% - this looks good on small screens, but on a large screen it means the arrow DIV is taking up 10% of the screen!
I was thinking of using CSS3 media queries to adjust the percentages dynamically, but I am wondering if there is some easier solution that I'm just not thinking of.
I would suggest that using css calc would be the answer:
CSS Calc on MDN
give the arrow div a fixed size and the container a calc(100%-30px):
.container {
width: calc(100%-30px);
min-width:100px;
margin-left: 0.5em;
margin-right: 0.5em;
height: 40px;
overflow: hidden;
white-space: nowrap;
float: left;
}
Here is an example on jsFiddle:
http://jsfiddle.net/RSTE9/5/
Notice I removed a few of the options options so you can see the effect better.
You do have a minimum width on the main container, which prevents more collapsing.
Why not set width of container as "*"?
.container {
width: *;
min-width:100px;
margin-left: 0.5em;
margin-right: 0.5em;
height: 40px;
overflow: hidden;
white-space: nowrap;
float: left;
}
jsFiddle: http://jsfiddle.net/RSTE9/6/
seems like you messed a bit with float , display and white space.
display and white space is a good clue, width a little less.
the idea is:
set the block container width no width nor overflow, but margin and white-space,
for inner content, reset white-space to normal , use display instead float.
Set min-width to text-content (100% - margin given to container)
Finally , vertical-align on both inline boxe containers text + arrow.
.outer-wrapper {
min-width:275px;
white-space: nowrap;
margin:0 1%;
}
.container {
min-width:98%;
margin-left: 0.5em;
margin-right: 0.5em;
min-height: 40px;
vertical-align:middle;
border: 1px solid #000000;
display:inline-block;
white-space:normal;
}
.arrow {
font-size: 10px;
width:1em;
text-align: right;
display:inline-block;
vertical-align: middle;
}
http://jsfiddle.net/GCyrillus/2e3du/1/
Related
I've a problem with some viewport width elements on my website. There are eight divs in a row with a width of 10vw and margin of 2.2222vw. Together the viewport width is about just below 100 (something of 99.9998). The divs are floatet so they should stay in a row.
Everything works just fine but when I'm adding a headline, the elements are breaking. In the fiddle below the divs are breaking without a viewport. Check out my website demo for the "real" issue.
This is my element CSS (SCSS):
door {
width: 10vw;
height: 10vw;
border: solid 3px #000;
float: left;
margin-left: 2.222vw;
position: relative;
margin-bottom: 2.222vw;
a {
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
}
}
.door.last {
margin-right: 2.222vw;
float: right;
}
FIDDLE | WEBSITE DEMO
I think this may be your solution, please try this
http://jsfiddle.net/bqx5u125/
I have added two classes to arrange the divs in horizontal and vertical manner. So this would be the css for those horizontal and veritcal divs.
.arrange-horizontally > *{
display: inline-block;} .arrange-vertically > *{
display: block;}
Also, no need of class 'last', and the float:right is the main thing causing you trouble.
I've tried to align last div element / elements using text-align-last property but it didn't work. I have much divs in the center, but my page is different on each resolution so I can't control if elements will be perfectly and none of them will be in last line alone or so, that's why I want to align them to left.
Fiddle: http://jsfiddle.net/ecn8c0pt/
Picture of my site:
Adding the following CSS will work.
http://jsfiddle.net/ecn8c0pt/1/
#gallery h2{
margin: 0;
height: 80px; /*Added height for the Heading */
font-size: 1.1em;
font-weight: 300;
color: #33CCFF;
}
.project{
display: inline-block;
margin: 0 15px 40px;
width: 156px; //To show in jsfiddle i reduced the width.
text-align: left;
float: left; //MUST CHANGE: Once you align left it will automatically float to left. Also the number of count per row will depends on the window width and div width.
}
.project .thumbnail{
width: 156px;//To show in jsfiddle i reduced the width.
height: 144px;
border-radius: 3px;
}
try adding styles to your CSS like these:
float:left;
min-width: 200px;
max-width: 200px;
and try to fix the width for the wrapping div tag
for example:
.wrapper {
width:1000px;
}
see in example DEMO and try to predict the width now when you control it good luck!
I feel this question has been answered but I searched and searched and no answer seems to deal with dynamic main content width.
I simply want this scenario:
|-|nav|-|main content|-|
Where nav is a DIV and main content is a DIV and both are placed inside another DIV container which has a width of 100%. - is simpy a spacing between the DIVs, a margin.
nav has a fixed width of 300px and "main content" div should always take the rest of the space available (to fill the 100% of the parent div) - without the use of JavaScript.
Also I want to have some margins left and right of each DIV (nav, main content) so that they have some space between them and the "browser border"/body.
I experimented with table, table-cell but the border-collapsing drove me nuts so I am heading back to god old "float: left" and clearfix. This is what I have so far:
<div id="container" class="cf">
<div id="nav">
Nav stuff
</div>
<div id="main">
Main stuff
</div>
</div>
#container {
padding: 0;
width: 100%;
background-color: orange;
min-height: 50px;
}
#nav {
display: inline;
float: left;
min-width: 300px;
width: 300px;
margin-left: 10px;
margin-right: 10px;
}
#main {
display: inline;
float: left;
background-color: green;
margin-right: 10px;
}
.. /* clearfix stuff omitted (class 'cf') */
So now the problem is, how to make "main content" (#main) fill the rest of the parent (#container). If I use a width of 100% the 100% is of course the full width of the parent and the div will go under the "nav" div. If i use "auto" the same thing happens. It of course works if I pass in a fixed width e.g. in pixels but I don't know the correct pixels in advance and using JS to calculate that seems a bit odd to me.
I've seen a solution where the "nav" was put inside "main" but that leads to problems with the margins. Try to insert a margin to create some space beside a div that is inside another div... I don't think that's anyhow possible in this universe.
Thanks for your help!
Maybe you should create BFC to face this problem.
For example:
#container{
border: 1px solid red;
}
#nav{
float: left;
width: 300px;
border: 1px solid green;
height: 200px;
margin-left: 20px;
margin-right: 20px;
}
#main{
overflow: hidden;
height: 400px;
border: 1px solid blue;
margin-right: 20px;
}
overflow: hidden; is the key to create BFC for #main.
JSFiddle : http://jsfiddle.net/yujiangshui/yMFB6/
More about BFC : https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
For example:
#container {
width: 100%
position: relative;
}
#nav {
position: absolute;
top: 0;
left: 0;
width: 300px;
}
#main {
margin-left: 320px;
}
JSFIDDLE
Example
If the adjacent element of a parent floating, the parent does not feel the width of the element, if it is dynamic. In chrome and opera works fine.
<div class="b-wrap">
<div class="b-content">
<div class="b-rect-left"></div>
<div class="b-rect-right"></div>
<div class="b-child-cont">джигурдаололо</div>
</div>
</div>
.b-wrap {
background-color: red;
height: 50px;
float: left;
}
.b-content {
margin: 5px;
overflow: hidden;
}
.b-rect-left {
width: 40px;
height: 40px;
float: left;
background-color: orange;
}
.b-rect-right {
width: 30px;
height: 30px;
float: right;
background-color: green;
}
.b-child-cont {
overflow: hidden;
}
Firefox calculated the width of an element that contains floats differently from Chrome. I don't know why.
However, what seems to be happening is the following.
The actual content in your snippet is in b-child-cont, a non-floated element. b-child-cont determines the width of b-content since the two other elements are (b-rect-left and b-rect-right) are floated and do not factor into determining the width of the content. In turn, the width of b-content sets the width of b-wrap, because b-wrap is floated and takes on the width of its child elements.
You as a designer and developer, need to allow some space for the two floated elements. You can do this in many ways. I will give two examples.
(1) Add left and right margins to b-child-cont:
.b-child-cont {
overflow: hidden;
background-color: yellow;
margin-left: 40px;
margin-right: 30px;
}
(Note: I added a background color to show the extend of the element.) The 40px and 30px values are based on the widths of the left and right square elements respectively.
(2) You can also specify a with to the parent element containing the floats:
.b-child-cont {
overflow: hidden;
background-color: yellow;
text-align: center;
}
.b-content {
width: 30em;
}
In this case, I set the with of b-content to 30em (you can adjust this accordingly) and I centered the text in b-child-cont.
You have come across a cross-browser discrepancy in how the CSS box model is calculated. Once you are aware of it, you need to design around it, but that is not too hard to do.
Fiddle Reference: http://jsfiddle.net/audetwebdesign/dzK73
Just add this firefox exception
#-moz-document url-prefix() {
.b-wrap{width:175px;}
}
I am trying to create an html interface, where rows will be dynamically added to my web page.
The way I am currently doing it is by using nested DIVs with the CSS display style set to table.
Each row has 3 divs. The left div and the right div have a fixed width, while the middle div should expand to fit the page horizontally regardless of the length of it's content.
My problem is I'm not sure how to make that center div expand the entire remaining width of the page. With the code below, the center div is as small as the content.
I tried a solution that floated the left div left, and the right div right, however that would not let me select a row of text properly. i.e., if I started selecting the right div's content, then dragged towards the left, the left and center div would not be selected.
The solution only needs to target webkit based engines, as my code will only be used in a webkit based environment.
EDIT!
I forgot to mention that I also tried using tables. However I also need to avoid getting horizontal scroll bars appearing on the page when the screen is shrinking. When I use tables and shrink the page, the center div stops shrinking at a certain point (due to the fixed width percentages I guess).
My CSS code:
.chatarea
{
display: table;
height = 100%;
padding-top:50px;
margin: 0px;
}
.row
{
#display: table-row;
}
.nick
{
display: table-cell;
width: 140px;
border-style: solid;
text-align: right;
}
.timestamp
{
display: table-cell;
width 50px;
border-style: solid;
}
.message
{
display: table-cell;
border-style: solid;
}
And the relevant html
<div class="chatarea">
<div class="row">
<div class="nick">
<p>Some Nick</p>
</div>
<div class="message">
<p>Some Message</p>
</div>
<div class="timestamp">
<p>Some Timestamp</p>
</div>
</div>
</div>
I believe this is a solution:
Add border-collapse: collapse; to .chartarea to remove the double border width.
Add width: 100% to .chartarea to cover the entire width of the window.
Add width: 80%; to .message to have it grow as the window width changes.
Add white-space: nowrap; to .nick to control wrapping.
Add white-space: nowrap; to .timestamp to control wrapping.
Uncomment display: table-row in .row
Check out this fiddle.
Note: the fiddle page appears to have been removed by the server.
Remove the display styles. Then just use:
.nick {
width: 50px;
float: left;
}
.timestamp {
width: 50px;
float: right;
}
Then .message will take up the remaining width.
Alternatively, just use a <table> element.
If you can't do it fake it. Just put your .nick and .timestamp inside .message and position them absolutely.
.nick
{
width: 140px;
border-right-style: solid;
text-align: right;
height:100%;
position:absolute;
top:0;
left:0;
}
.timestamp
{
width: 50px;
border-left-style: solid;
position:absolute;
top:0;
right:0;
height:100%;
}
.message
{
border-style: solid;
padding:0 50px 0 140px;
overflow:hidden;
position:relative;
}
I've check the fiddle in recent chrome and safari (on windows) and had no problems with selecting text.