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

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, after which the layout is broken.

JSFIDDLE shows a broken layout: http://jsfiddle.net/4gbP8/

How to save this layout when adding content?

t

Answer 1

So, I was able to hold them back by placing the container in an empty div called top. I think that if I understood 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 do not know if you can update the HTML, but I have a solution. If you can add a new class.

I added a class called clear , which helps to reset 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 this helps or I can fake something to make it work better for you.

Answer 3

You have 2 questions

To keep the distribution of columns, you must clear the floats

To keep backgrounds, you should use negative fields "equ" exaggerated shims

You get it

(See fiddle with demo and full coding)

You should include wrappers for each pair of floating elements and some css for the negative margin trick. The 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; ... } 

Left divs should include

 { ... clear:left; ... } 

And the wraper that should be included for each pair of floating divs should be

 .wrapper { overflow:hidden; } 

Answer 4

Table / cell-table display properties can do what you are 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 content should be pumped for narrow devices, hide the screen properties behind a multimedia request focused on wider devices.