I have a modal box where I'm trying to put two columns beside each other, and I did that by assigning float: left to one div (.center-columnb) and a float: right to .map-column.
What happens, however is that 'center-columnb' breaks the container div with the grey gradient background as if this div was placed UNDER that container div (notice the rounded edges on the bottom of the grey part, that was meant to be at the bottom of the div.
When I remove float: left from centercolumnb from style.css, everything is ok except that the column on the right does not stay there anymore. Does anyone have any alternatives that could help me? Thanks :)
You have a parent div of #contentholder but it's not containing the floats within it at this point. A floated element, by default, is taken out of the document flow and any parent div will collapse. To make it contain the floats within, you need to give it an overflow property. This should do the trick:
#contentholder {
overflow: auto;
}
Another way is to clear at the bottom of the Question container. For a full cross browser compliant solution, just add before the closing div:
<div style="clear:both"></div>
Related
I have a div element which is header and is fixed. I want it to remain at top of my website while other contents move below it while scrolling.
Below this header is a div element containing two div elements, one is floated left while other right.
Now when i scroll down my webpage left floated div element moves below the header as it should. However the other div element is moving over the header. I tried using z-index but it's not working. Please help.
Please add the sample code to understand the problem.
Try adding z-index to the parent. Something like this
.fixed{
z-index:1;
}
.float-parent{
z-index:0;
}
I feel like CSS is much harder and confusing than C++ therefore I have few questions.
Consider following html body
<div id="mydiv1">12345~~~~~~~~/</div><div id="mydiv2">+_______67890</div>
And CSS
#mydiv1 {
float: left;
background-color: red;
margin-right: -30px;
}
#mydiv2 {
float: left;
background-color: blue;
}
which looks like this (in my latest Chrome)
which makes sense to me because second div is floating and it floats over first div.
On the other hand if I remove float property from mydiv2 only content moves but background box stays in the same place.
1) Could you please explain why ?
Now I'll remove margin and float, and add width to both divs making having CSS
#mydiv1 {
background-color: red;
width: 220px;
}
#mydiv2 {
background-color: blue;
width: 240px;
}
It will expectantly look like this
But if I add float: left to #mydiv1 it suddenly looks like this
2) Why did second div become twice as high ? I checked it by setting z-index of first div to -1.
PS. I've done tutorials on CodeAcademy and read float/margin-related articles on smashingmagazine.com. Sadly it didn't made everything crystal clear. If you guys can suggest online resources or book that would have explained these questions to me I'll appreciate it a lot.
<div> is a block-level element so it naturally fills the width of the container it's in. It makes its neighboring elements go above/below it, but not beside it.
Now, when you apply float to a block-level element, it no longer fills the width of the container, its width will be that of its contents. It also loses the ability to force its neighbors to go above/below it.
Note:The tricky bit is that the container holding the floated elements will not have a proper height because the floated elements are no longer part of the regular flow of content. (Here's how to get around it: http://www.quirksmode.org/css/clearing.html)
Regarding the last part of your question, if a floated element, eg. #mydiv1, is beside a block-level, eg. #mydiv2, then the block-level element wraps or flows around the floated element. It's one of the ways people can get text to wrap around an image in a news article.
When you remove the float from div2 it goes behind the floated div1, because floated elements does not take any height from it's content. You can say it's going out of the vertical flow of elements. However, it still take horizontal space from content. So the result is as expected here, once you "know the rules".
This should also explain the double height in your other example.
Here is a great article from css-tricks.com
I hope that helps!
If we don't give either float or width to any block level element like div then it occupies the entire width of the container.
Instead of float you can give some width and display: inline-block. This display property will display content inline and behaves like a block level element.
The bottom div is moved further to the left, why is that, how can I align them better?
Image of how it looks
Link to markup
Any help would be appreciated.
Ok, this is because of the Items inside the stats div. The bottom one has more "items" so it is moved further to the left (because it is wider and floated right). To fix this, I would recommend giving that div a fixed width, maybe 400px. so <div style="float: right; width: 400px;> on line 30.
I have 2 divs as columns, both are floated left and set to clear none. Their container div has a background image at the top, so the background is at the top of both columns.
I want to be able to also have a background image at the bottom of the columns. Ive created another div which sits inside the container div (but outside the columns) and set a background image to its bottom.
The problem is that this div doesn't extend to the bottom of the columns it contains. How can I make it do this? Ive tried playing around with floats and clearing but without any luck.
Thanks
In addition to the techniques the others already mentioned, you can add overflow:hidden to the parent container's style.
This is a very well known CSS quirk: here is a complete treatment: http://www.quirksmode.org/css/clearing.html
CSS:
div#test {
min-height:100%;
background-image: url('http://www.google.nl/images/logos/ps_logo2.png');
background-repeat: no-repeat;
background-position: bottom;
}
div#wrapper {
height: 500px;
}
HTML:
<div id="wrapper">
<div id="test">Blalalalalala</div>
</div>
This way you're div (#test) will have the height of his parent (#wrapper).
http://jsfiddle.net/F95xN/6/
Try removing the min-height: 100%; and you'll see.
Float elements do not count towards the height of a non-float elements. You can make the container div expand to include these floats in a couple ways:
Add float: left to the container div, too.
Or, add something like <div style="clear: both;"></div> to the end of the container div.
Or, use a more flexible clearfix technique.
Oops, I hadn't noticed but id set the height of one of the containers when I was wire-framing and forgotten it was there. Removing the height and floating the right div fixed this for me.
Thanks anyway.
So I have two divs. One left div with navigation links and one right div that populates with content depending on what link you click on the left. I would like to have a vertical gray line between the navigation and the content separating the two, but I need it to change in height depending on how long the right side content div is. (And also if the right side isn't as long as the navigation, have the line go to the bottom of the nav by default).
So if the user clicks on a link that makes the right content div really long, I need the vertical line to change its height dynamically and go all the way down, but if the content isn't as long as the nav i still need it to go all the way down to the end of the nav.
I was trying things with borders and height:100% but I couldn't get anything to work cross-browser. (IE and FF) Thanks!
Assuming your left nav div has a fixed height, or a height that doesn't change often. Let's suppose your left nav div has a height of 400px. Then:
div.leftnav {
height: 400px;
float: left;
}
div.rightContent {
min-height: 400px;
border-left: 1px solid gray;
float:left;
}
Keep in mind, "min-height" is not supported by IE6.
A repeating background image for the parent div with a vertical grey line positioned appropriately would be your best bet.
You could let the navigation div have a border on the right, and the content div have a border on the left. Letting those two borders overlap should give the desired effect.
i once solved this by using a background image repated on the y axis. Just create it as wide as your page and not very tall, maybe 10-20 pixels. and then just repeat it downwards. Kind of cheating maybe, but it works in some cases :p
One example of how I did it you can see on this website.
The way I do this is to put the elements into a container div with overflow hidden. You then apply a left border to all repeating div's. Then, on all floating child elements you set the css properties: padding-bottom:2000px; margin-bottom-2000px;
Example:
CSS
div.vert-line{overflow:hidden}
div.vert-line>div+div{border-left:#color;}
div.vert-line>div{width:200px; float:left; padding-bottom:2000px; margin-bottom:-2000px;}
HTML
<div class="vert-line>
<div>Left Side</div>
<div>Right Side</div>
</div>
Hope this helps!
The answer to this question might help you:
Extending sidebar down page
you can use the css border-left on the right div.
.vertical_line { border-left: 1px solid #f2f2f2; }
<div>
<p>first div</p>
</div>
<div class="vertical_line">
<p>second div</p>
</div>