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
Related
Why does box B surround box A in the code below? Isn't float left on box A supposed to make them align horizontally?
<div style="width:300px">
<div style="width:45%;margin:5px;float:left;border:1px solid black">
<p>Box A</p>
This is just content for box A.
</div>
<div style="width:45%;margin:5px;border:1px solid red">
<p>Box B</p>
This is just content for box B.
</div>
</div>
http://jsfiddle.net/VCr8y/
By adding float: left to the first div, you are effectively removing it from the page flow, but box B is not removed from the page flow. However, box B cannot have its text running through box A, so it just "surrounds" it, as you see in your JSFiddle. What you should do is float box B as well, and apply a clear afterwards (or another clearfix solution) so that your two divs aren't covered up by divs after it:
<div style="width: 300px;">
<div style="width: 45%; margin: 5px; float: left; border: 1px solid black;">
<p>Box A</p>
This is just content for box A.
</div>
<div style="width: 45%; margin: 5px; float: left; border: 1px solid red;">
<p>Box B</p>
This is just content for box B.
</div>
</div>
<div style="clear: both;"></div>
Here's a JSFiddle. By the way, using classes would probably be helpful.
This question already has answers here:
Margin on child element moves parent element
(18 answers)
Closed 8 years ago.
In HTML 5 with doctype , I have inside body:
<div style="width:100%; background-color: #cccccc;">
<div style="margin-top:20px; width:100px; background-color: #aa0000;">Sub</div>
Main
</div>
http://jsfiddle.net/F3kXw/
When I render in firefox, I getting outer div have margin 20px from top of page,
what I need only sub div have margin 20px from the outer div. It works if I put character on top of sub div like:
<div style="width:100%; background-color: #cccccc;">
Main
<div style="margin-top:20px; width:100px; background-color: #aa0000;">Sub</div>
Main
</div>
e.g. http://jsfiddle.net/F3kXw/2/
It makes no sense to me, I never have had this problem in the past.
Try this code maybe can help
<div class="website_sub_frame" style="width:100%; background-color: #cccccc;overflow:hidden">
<div style="clear:both; margin-top:20px; width:100px; background-color: #aa0000;">Sub</div>
Main
</div>
Instead of using margin top why don't you add another div above your sub div and give it a height of say 20px.
eg:
div class="website_sub_frame" style="width:100%; background-color: #cccccc;"
div style="height:30px">Sub /div
Main
/div
Try to give margin-bottom instead margin-top to child div. That's it.
<div class="website_sub_frame" style="width:100%; background-color: #cccccc;">
<div style="width:100px; background-color: #aa0000; margin-bottom:20px;">Sub</div>
Main
</div>
Here is a working demo
OR you are looking for this?
<div class="website_sub_frame" style="width:100%; background-color: #cccccc;">
Main
<div style="width:100px; background-color: #aa0000; margin-top:20px;">Sub</div>
</div>
Here is a working demo
Hope it helps you!
Make the parent DIV float. Not exactly sure why that fixes it, but it works.
<div style="float:left; width:100%; background-color: #cccccc;">
<div style="margin-top:20px; width:100px; background-color: #aa0000;">Sub</div>
Main
</div>
i used many ways to make a flexible height to the divs and the whole page but no way .
what i want to do is :
i have 2 columns in the page after the header (right_side , left_side)
the both left and right sides will contain flexible content .
so i need the height of the both columns be flexible.
also want the right side height depends on the left side because maybe the article will be taller than the right content ..
i tried "height" and "min-height" but no way
this is my code
<html style="min-height: 100%;">
<body style="min-height: 100%; width: 980px; border-right: 2px solid black;
border-left: 1px solid black; margin: 0 auto;">
<div><img src="header.jpg"/></div>
<div id="content" style="min-height: 100%">
<div id="right" style="background: red; float:right; width: 280px; min-height: 100%;">my flexible right content</div>
<div id="left" style="background: blue; float:left; width: 700px; min-height: 100%;">
<p>my flexible article </p>
<p>my flexible article </p>
</div>
</div>
</body>
</html>
Try this: http://jsfiddle.net/mcfarljw/erdH7/
You're going to need to use some divs in divs to get the effect of having one column flexible with another if you want it pure CSS and HTML. You can do something like this for the html format.
<div id="container2">
<div id="container1">
<div id="col1">
</div>
<div id="col2">
</div>
</div>
</div>
I'd highly recommend you move your CSS styling into the head using references to the divs or put them in a seperated linked CSS file altogether.
Based on: http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm
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.
I have three divs and one main div:
<div id="container" style="width:100%;">
<div id="left" style="width:201px; float:left;">
....
</div>
<div id="centre" style="float:left;">
....
</div>
<div id="right" style="width:135px; float:right;">
....
</div>
</div>
How it is possible to make centre div max width, so that
containerDivWidth = leftDivWidth+ rightDivwidth + centreDivWidth;
This will allow for you to have fixed right and left columns and a flexible center portion:
CSS
<style type="text/css">
#left {
float: left;
width: 201px;
border: 1px solid red;
}
#centre {
display: block;
overflow: auto;
border: 1px solid green;
}
#right {
float: right;
width: 135px;
border: 1px solid blue;
}
</style>
HTML
<div id="container" style="width:100%;">
<div id="left">Left</div>
<div id="right">Right</div>
<div id="centre">Middle</div>
</div>
I believe that what you are trying to achieve is the "Holy Grail" layout.
There is a great List Apart article about this Layout, you should check it:
http://www.alistapart.com/articles/holygrail
What I've previously done, is to set centre to have a left margin of 201px, and a right margin of 135px. Set it to relative positioning (instead of floating it), and then it should fill the entire remaining space in between the left and right columns.
I can't seem to find one of my old code examples, so this is the best I can do at the moment. Hope it helps!
This might help:
http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm
(source: matthewjamestaylor.com)
You cannot mix relative and fixed width which is in my opinion a shortcoming in CSS.
The best you can do is something like:
<div id="container" style="width:100%;">
<div id="left" style="width:20%; float:left;">
....
</div>
<div id="centre" style="width:65%; float:left;">
....
</div>
<div id="right" style="width:15%; float:right;">
....
</div>
</div>
I'll be very happy if I'm wrong.