I have nested divs, with most being float:left; display:block;, like do:
<div class="container" style="display:block;">
<div style="float:left; display:block; height:100px;">
<div style="float:left; display:block; height:100px;">
</div>
I want the div container to get bigger without setting a height. At the moment it's a flat line.How do I set up the inner divs, so that the container has a height?
TL;DR: Currently I can see the 2 inside div's fine, but the container is a flat div (no height).
How do I give it a height?
You have two options:
<div class="container" style="overflow:hidden">
<div style="float:left; height:100px;">
<div style="float:left; height:100px;">
</div>
or
<div class="container">
<div style="float:left; height:100px;">
<div style="float:left; height:100px;">
<div style="clear:left">
</div>
Note that overflow:hidden elements will wrap around floating inner elements. Alternatively, you can use an element to clear the float, which will also make the surrounding element to wrap it's content.
Another tip: You don't have to state that divs are display:block. In HTML, there are basically 2 types of elements, block and inline. Divs are block by default.
Add overflow:hidden to that DIV.
Related
I have a container DIV with random number of children inside.
I always want children to fill 100% width of parent. I tried using do display:table-cell and other CSS tricks but all in vain.
Here is fiddle.
HTML
<div class="wrapper">
<div class="panel">1
</div>
<div class="panel">2
</div>
<div class="panel">3
</div>
<div class="panel">4
</div>
</div>
Add display:table to the .wrapper
http://jsfiddle.net/pA3fj/2/
I have 3 divs in a wrapper.
one of this divs contains my content class="cont" this div has a dynamic height. The other divs navi-left and und navi right should have a hight like div cont. i have tried this but it dont work. can you help me please?
<div style="width:400px;">
<div class="navi-left" style="width:50px; height:100%; background:grey;"></div>
<div class="cont" style="width:80px; height:80px; background:blue;"></div>
<div class="navi-right" style="width:50px; height:100%; background:green;"></div>
</div>
If you are looking for a fluid 3 colum layout of equal height, then check this 'holy grail' post.
In order for a percentage height to trigger, the height of the parent should be known. Also, your DIVs should be displayed inline if you want them to all show on the same row.
<div style="width:400px;height:80px;">
<div class="navi-left" style="width:50px; height:100%; background:grey;"></div>
<div class="cont" style="width:80px; height:80px; background:blue;"></div>
<div class="navi-right" style="width:50px; height:100%; background:green;"></div>
</div>
CSS
div {display:inline-block;}
Fiddle: http://jsfiddle.net/qvepX/
I have a wrapper <div> which contains two inner <div>s that are floating.
<div class="outside" style="border:1px solid #555;">
<div class="inside" style="float:left; width:40px;">CONTENT</div>
<div class="inside2" style="float:left; width:40px;">CONTENT</div>
</div>
The problem is the wrapper <div> has width of 80px since two inner <div> are 40px each. But always the wrapper <div> is 0px in height which makes the border appear like a line at the top.
So I placed the two inner <div>s inside a <table>. It worked well. But how do I avoid this problem without going for a <table>?
Set overflow: hidden on the parent.
<div class="outside" style="border:1px solid #555;overflow:hidden;">
<div class="inside" style="float:left; width:40px;">CONTENT</div>
<div class="inside2" style="float:left; width:40px;">CONTENT</div>
</div>
The outer div is collapsing because the two child divs inside of it are floating. The easiest fix for this is to set overflow: hidden; on the outer div.
Try this:
<div class="outside" style="border:1px solid #555; overflow:auto">
<div class="inside" style="float:left; width:40px;">CONTENT</div>
<div class="inside2" style="float:left; width:40px;">CONTENT</div>
</div>//Outside container close
Let's say I have a this markup:
<div id="container">
<div id="header">content</div>
<div id="left-column">content</div>
<div id="right-column">content</div>
<div id="footer">content</div>
</div>
The #container is centered and fixed at 1000px, #header and #footer are 1000px, and #content-left and #content-right are floated left, at 500px each.
How do I extend the header and footer background colors the full length of the browser window if the container is fixed?
First, change a little your html structure. While you're there, why not using html5 for header and footer elements.
Html
<header>
<div class="container">
content
</div>
</header>
<div class="container">
<div id="left-column">content</div>
<div id="right-column">content</div>
</div>
<footer>
<div class="container">
content
</div>
</footer>
Css
Than, in the Css, set the header and footer width to 100% and make them de color you want. In this example red. Than use a class .container that will make the content wherever you put it (header, main section, footer) display in the middle of the screen, but without any background color.
header, footer{display:block; width:100%; background:#ff000; margin:0; padding:0;}
.container{width:1000px; margin:0 auto;}
Hope this help :)
The header and footer divs need to be outside the container div.
Apply the background colour to a wrapper around the header/footer.
html
<div id="header-wrapper">
<div id="header">content</div>
</div>
<div id="container">
<div id="left-column">content</div>
<div id="right-column">content</div>
</div>
<div id="footer-wrapper">
<div id="footer">content</div>
</div>
css
#header-wrapper{width:100%;height:xxx;background:#3399ff}
#header,#footer{width:1000px;margin:0 auto}
The accepted answer is really a bad way to accomplish this. HTML is used for semantic meaning of the content. Removing your header from your container is not semantic! Here's a much better way of doing this that still preserves the semantic content: http://css-tricks.com/full-browser-width-bars/.
I have a two column layout, using a container and a div called "left" and a div called "Right". How do I make sure that the div#right is only 500px, but div#left is as big as the user's browser will allow ...?
Here's what I have now:
<div id="container">
<div id="left" style="float:left"> </div>
<div id="right" style="float: right; width: 500px"> </div>
</div>
Don't float the left div to the left. If you leave it "unfloated", then it will be the main content and automatically fill the available space.
You can do it by unfloating the #left div and giving it a padding-left that equals the #right div's width (this makes room for the right div). Finally, you'd need to swap the source order of both div's.
<div id="container">
<div id="right" style="float: right; width: 100px; "> </div>
<div id="left" style="padding-right: 100px; "> </div>
</div>
You can see it in action here.
Change style of you left div to:
<div id="left" style="margin-right:500px"></div>
This will make sure that content won't flow under the right floating div when content in the left one takes more vertical space than content in the right one.
Important
Don't forget to put the floated div in front of the unfloated one. So put your right one first in the markup and then the left one.
Solution to your particular problem
So you have two div elements
<div id="endants-content">
<div id="screenshot-preview">...</div>
<div id="endants-main-content">...</div>
</div>
And CSS should be like this to make it work as expected:
div#endants-content
{
/* put min-width here is you need it */
}
div#screenshot-preview
{
float:right;
width:30%;
}
div#endants-main-content
{
margin-right:30%;
overflow:auto;
}