How does this work?

 

http://www.sampleestateagent.com/faux/

 

I'm doing a responsive site where I will have two columns that I want to be equal in length. They will have rounded corners. I was looking for solutions all of yesterday and this is the only solution I've found.

 

How would I split them up so they aren't overlapping each other?

 

I've played around with it but not really understanding the theory behind it.

 

Thanks

 

Josh

Do research on a liquid static liquid layout. It is based on the exact same principle to get this to work the way it is, yet this is much easier. In this case, your center column is also liquid.

 

And to figure out how it is done, use Firebug in Firefox or some other browser developer tool.

 

Essentially, your structure will be the following for the primary containers:

 

.primary,
.secondary,
.tertiary { position: relative; width: 100%; height: 500px; float: left; overflow: hidden; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }

.primary { right: 0; background-color: #f00; }
.secondary { right: 30%; background-color: #00f; }
.tertiary { right: 40%; background-color: #ccc; }

 

Then, inside .tertiary, you will have 3 child containers, all on the same level:

.cell1,
.cell2,
.cell3 { position: relative; float: left; overflow: hidden; }

.cell1 { left: 70.5%; width: 30%; }
.cell2 { left: 70.5%; width: 39%; }
.cell3 { left: 71.5%; width: 30%; }

 

As for the HTML:

<div class="primary">
<div class="secondary">
<div class="tertiary">
<div class="cell1"></div>
<div class="cell2"></div>
<div class="cell3"></div>
</div>
</div>
</div>

If you want a fluid two-column code with fluid widths and equal heights, have a look at this:-

http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm

 

The explanation of the method is for a three-column example here:-

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

 

If you don't understand the code, just copy his 2 column source code entirely and change the content. He's put it online for people to use his code. You can add rounded corners, add border-radius: 10px; to his #container2 and #container1 styles.

Edited May 15, 201214 yr by Wickham

Thanks for the replies.

 

Wickham with your one, if say I wanted to have a spacer in between the two columns, how would I do this? Is it possible because the background colour is running in the background one on top of the other? At the moment if I add border-radius, your code is doing the same as the one in the OP.

Wickham with your one, if say I wanted to have a spacer in between the two columns, how would I do this? Is it possible because the background colour is running in the background one on top of the other? At the moment if I add border-radius, your code is doing the same as the one in the OP.

With the James Taylor method and the one in the sample in your first post, the main containers with the equal height backgrounds are all width: 100% and overlap each other, so a space between them isn't possible as I understand it.

 

You would probably do it if you had two divs with % widths and float: left; to be side by side and a margin to create the space between them and both with backgrounds and use javascript/jQuery to find out the div with the greatest height which is applied to both divs. See

http://www.socreative.tv/blog/equal-css-columns-with-jquery/

a much simpler code for simple divs with a float and margin to create the space between them but it won't work if people have javascript disabled.

 

Alternatively I'm fairly sure you can do it using display:table (if you want to use tables for page structure, although perhaps divs with display:table don't qualify as tables) but display:table doesn't work in IE6/7. See item 17f here:-

http://www.wickham43.net/firefoxbackground.php

which shows three divs with equal height (ignore the lime colored nested div in the center azure div). If you make all divs % width it should work although I haven't tested it. The example doesn't have any div widths because they are all equal inside a page container.

 

Edit: this does exactly what you want, fluid widths , rounded corners and equal heights and it validates:-

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 
charset=utf-8">
<title>Test</title>

<style type="text/css">

#displaytable { display: table; }
#displaytablecell1 { display: table-cell; border-
radius: 10px; width: 37%; vertical-align: top; 
background: skyblue; }
#displaytablecell2 { display: table-cell; border-
radius: 10px; width: 61%; vertical-align: top; 
background: lime; }
#displaytablecell3 { display: table-cell; width: 2%; }
/*widths for #displaytablecell1 and 
#displaytablecell2 and the 2% for #displaytablecell3 
must total 100% or less; widths for 
#displaytablecell1 and #displaytablecell2 can be 
omitted and they will be equal and fill remaining 
space beside #displaytablecell3*/
</style>

</head>

<body>

<div id="displaytable">

<div id="displaytablecell1">
<p>
Content in #displaytablecell1 with display: 
table-cell; vertical-align: top; background: skyblue;
</p>
</div>

<div id="displaytablecell3">
 
</div>

<div id="displaytablecell2">
<p>
Text in div #displaytablecell2 with display: 
table-cell; vertical-align: top; background: 
lime;<br>
All display: table-cell divs are inside containing 
div #displaytable with display: table;<br>
More text<br>
More text<br>
More text
</p>
</div>

</div><!--end of #displaytable-->

</body>
</html>

To form the space I added a blank div between the others (not very good but margin won't work as display:table is inline and if converted to block the equal heights disappear).

Edited May 16, 201214 yr by Wickham

Wow thanks, that is so helpful. That's exactly what I wanted. I'll have to go through what you did step by step and see how it works.

 

I can't believe it's so difficult to make two equal length boxes with liquid layout and rounded corners.

 

Thank you again.