By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,447 Members | 1,172 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,447 IT Pros & Developers. It's quick & easy.

Simple columns with CSS

P: n/a
I'm trying to create two columns within a gray box (#backdrop). I've
setup a <divfor the graybox and thought I could nest another <div>
within it to get the border and separation that I was looking
for...but that didn't work. What is screwing me up here? This isn't
as intuitive as I would have thought...

Thanks

----------------------
<html>
<head>
<title></title>
<style type="text/css">
div.sub {padding: 0; margin: 0 auto; width: 90%; max-width: 950px;}
#main {clear: both; text-align: center;}
#primary {width: 70%; padding-right: 2%;
border-right: 1px solid #CCC;}
#backdrop {background-color:#aaaaaa; border:1px solid #ccc;}
..column {float: left; text-align: left; margin: 1.5em 0;}
..column1 {float: left; text-align: left; margin: 1.5em 0;
width:50%; border-right:1px solid #ccc;}
</style>
</head>
<body>
<div id="main">
<div class="sub">
<div id="primary" class="column">
<div id="backdrop">
<div class="column1">
Testing<Br/><Br/>
Testing 2<br/>
</div>
<div class="column">
TEsting 3<br/><br/>
Testing 4<br/>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Feb 13 '07 #1
Share this Question
Share on Google+
3 Replies


P: n/a
On 2007-02-13, Greg Scharlemann <gr**************@gmail.comwrote:
I'm trying to create two columns within a gray box (#backdrop). I've
setup a <divfor the graybox and thought I could nest another <div>
within it to get the border and separation that I was looking
for...but that didn't work. What is screwing me up here? This isn't
as intuitive as I would have thought...
It looks like your problem is the quite commonly seen one that divs
don't grow vertically to accommodate the floats inside them (unless they
start new "block formatting contexts").

If you add float:left and width:100% to #backdrop is that the effect you
want?

Some explanation here:

http://groups.google.co.uk/group/com...622d5c5?hl=en&
Feb 13 '07 #2

P: n/a
In article
<11**********************@v33g2000cwv.googlegroups .com>,
"Greg Scharlemann" <gr**************@gmail.comwrote:
I'm trying to create two columns within a gray box (#backdrop). I've
setup a <divfor the graybox and thought I could nest another <div>
within it to get the border and separation that I was looking
for...but that didn't work. What is screwing me up here? This isn't
as intuitive as I would have thought...
----------------------
<html>
<head>
<title></title>
<style type="text/css">
div.sub
snip complicated code...

You could just use a table. What is it for?

Or

<div id="gray">
<div id="col1">
test1
<br>
test2
</div>
<div id="col2">
test1
<br>
test2
</div>
</div>

and style the divs. Start with:

#gray {background: #ccc;}

#col1 {float: left; width: 70%;}

#col2 {float: margin-left: 70%;}

and add what you like to the styles. See how you go...

--
dorayme
Feb 13 '07 #3

P: n/a
Thanks Ben C and Dorayme.... I was able to leverage the information
you provided to create two columns with a gray backdrop.

greg
Feb 17 '07 #4

This discussion thread is closed

Replies have been disabled for this discussion.