473,386 Members | 1,804 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,386 software developers and data experts.

Simple columns with CSS

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
3 2066
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: newbie001 | last post by:
I have the following code in a listview control's initList function (called from form_load event). i can't understand why the listview box still appears blank with no columns or listview items. ...
0
by: Tal Sharfi | last post by:
Hi everyone I recently had the need for StringGrid object same as the one that Delphi has. An object that helps show lists of other objects in a simple grid. I searched the news groups and...
13
by: Saber | last post by:
I did a lot of searches and read something about datagrids. But I couldn't find the answer of my simple question, how can I show only my desired columns of a table? for example I wrote this sql...
3
by: Bob Bedford | last post by:
I do probably need a good coffee, but I can't find out a simple way to do so. Let's say I want to create a table using a number I receive. For every number, I must have a table with maximum 5...
12
by: dgk | last post by:
I'm planning on writing a fairly small app (VB2005) to be distributed via shareware that needs a single user database. I don't even think that SQL Server Express edition is needed since I think...
3
by: RadiationX | last post by:
Hello, I have a simple print output questioin. What I'm trying to do is print an array of lenth 20 which holds 20 ints in the form of five columns and four rows. like this below 12 80 90 6 ...
2
by: news reader | last post by:
Hi, Does anoone of you know if there is already a simple application doing something like this. I would enhance / tune the missing features, but would like to avoid to start from scratch or...
6
by: issac | last post by:
Hi folks Im trying to do a simple query involving the distinct keyword and an access 2000 db, but have been frittering with it for amost and hour and a half and I cant make it work. This is...
1
by: Phillip Vong | last post by:
Newbie here trying to learn. Using VS2005 / learning in VB.NET for an ASPX page. Sorry for this simple question. I have a Gridview1 with 2 columns. I added a 3rd column and all I want to do...
7
by: axlq | last post by:
I know this is a simple problem but it bedevils me. I'd like to have a container with two columns with the following properties: 1. Both columns dynamically adjust their width to fit their...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.