How do you maintain CSS layout when adding content (ASP.NET) - html

Question

I have a page in ASP.NET as follows.
JSFIDDLE http://jsfiddle.net/nyrUp/
HTML
<div class="mainContainer">
<div>
<div class="topLeft">
<% =DateTime.Now.Ticks.ToString()%>
</div>
<div class="topRight">
foo
</div>
</div>
<div>
<div class="bottomLeft">
foo
</div>
<div class="bottomRight">
foo
</div>
</div>
<div class="underneath">
foo
</div>
</div>
CSS
.mainContainer {
}
.topLeft {
width: 50%;
float: left;
background-color: red;
}
.topRight {
width: 50%;
float: left;
background-color: orange;
}
.bottomLeft {
width: 50%;
float: left;
background-color: yellow;
}
.bottomRight {
width: 50%;
float: left;
background-color: green;
}
.underneath {
width: 100%;
background-color: blue;
}
This works fine, until you add content to any div, at which point the layout is broken
JSFIDDLE showing broken layout: http://jsfiddle.net/4gbP8/
How do I maintain this layout when content is added please?
i.e.

Answer 1

So I was able to contain them by placing a container on the blank div, called top. I think if I understand correctly you want each box to fill the page.
http://jsfiddle.net/4gbP8/2/
CSS ADD
.top {
display: inline-block;
width: 100%;
height: 100%;
}
HTML
<div class="top">
<div class="topLeft">
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
</div>
<div class="topRight">
foo
</div>
</div>

Answer 2

I dont know if you are able to update the HTML but I have a solution If you can add in a new class.
I added a class called clear which help to push down the different levels and gives them a bit more structure.
JSFIDDLE
CSS
.clear{clear:both;}
HTML
<div class="mainContainer">
<div class="clear">
<div class="topLeft">
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
</div>
<div class="topRight">
foo
</div>
</div>
<div class="clear">
<div class="bottomLeft">
foo
</div>
<div class="bottomRight">
foo
</div>
</div>
<div class="underneath clear">
foo
</div>
</div>
Let me know if it helps or I could tweek something to make it work better for yourself

Answer 3

You have 2 issues
In order to keep the column distribution you must clear the floats
In order to kept the backgrounds you must use negative margins "equ" exaggerated paddings
You will get this
(
See this fiddle with demo and full coding )
You must include wrapers for each pair of floating elements and some css for the negative margin trick
Markup should be as follows
<div class="mainContainer">
<div class="wrapper">
<div class="topLeft">
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
</div>
<div class="topRight">
foo
</div>
</div>
<div class="wrapper">
<div class="bottomLeft">
foo
</div>
<div class="bottomRight">
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
</div>
</div>
<div class="underneath clear">
foo
</div>
</div>
Each floating div should include
{
...
padding-bottom:2000px;
margin-bottom:-2000px;
...
}
The ....left divs should include
{
...
clear:left;
...
}
And the wraper to be included for each pair of floating divs should be
.wrapper {
overflow:hidden;
}

Answer 4

The table/table-cell display properties can do what you're looking for:
http://jsfiddle.net/4gbP8/3/
.mainContainer {
}
.mainContainer > div {
display: table;
width: 100%;
}
.topLeft {
width: 50%;
display: table-cell;
background-color: red;
}
.topRight {
width: 50%;
display: table-cell;
background-color: orange;
}
.bottomLeft {
width: 50%;
display: table-cell;
background-color: yellow;
}
.bottomRight {
width: 50%;
display: table-cell;
background-color: green;
}
.underneath {
width: 100%;
background-color: blue;
}
If the content needs to reflow for narrow devices, hide the display properties behind a media query targeting wider devices.