Quick CSS question

Dev Shed Forums Sponsor:

January 15th, 2004, 12:06 PM

ace2600

Contributing User

Join Date: Dec 2003

Location: Austin, Texas

Posts: 126

Time spent in forums: 5 h 50 m 34 sec
Reputation Power: 5

Quick CSS question

How do I get 2 boxes on each side of each other? They need to be relative and have a box directly on top and one directly on bottom.

I’m looking for a solution like this:
<div id=”TitleBar”>…</div>
<div id=”LeftColumn”>...</div>
<div id=”RightColumn”>…</div>
<div id=”BottomBar”>…</div>

Which should look like this:

Code:

 _____
|_____|
|__|__|
|_____|

Here is what I have so far for the top and bottom bars:

Code:

#TitleBar
{
    position: relative;
    left:0px;
    top:0px;
    width:98.5%;
    margin: 0px;
    padding: 5px;
    border-top: 2px solid #333399;
    border-right: 2px solid #333399;
    border-bottom: 1px solid #333399;
    border-left: 2px solid #333399;
}
#BottomBar
{
    position: relative;
    left:0px;
    top:0px;
    width:98.5%;
    margin: 0px;
    padding: 5px;
    border-top: 1px solid #333399;
    border-right: 2px solid #333399;
    border-bottom: 2px solid #333399;
    border-left: 2px solid #333399;
}

Please help, this is driving me crazy,
-Brandon

January 15th, 2004, 12:14 PM

vbrtrmn

4:04 Time Not Found

Dev Shed Intermediate (1500 - 1999 posts)

Join Date: Jan 2004

Location: Northern Virginia

Posts: 1,933

Time spent in forums: 1 Week 22 h 2 m 6 sec
Reputation Power: 178

Re: Quick CSS question

Maybe something like this:
Styles:

Code:

#Midbar {
	position: relative;
	left:0px;
	top:0px;
	width:98.5%;
	margin: 0px;
	padding: 5px;
	border-top: 1px solid #333399;
	border-right: 2px solid #333399;
	border-bottom: 2px solid #333399;
	border-left: 2px solid #333399;
}
#LeftColumn {
	float: left;
	width: 50%;
}
#RightColumn {
	float: left;
	width: 50%;
}

HTML:

Code:

<div id="TitleBar">.</div>
<div id="Midbar">
	<span id="LeftColumn">...</span>
	<span id="RightColumn">.</span>
</div>
<div id="BottomBar">.</div>

January 15th, 2004, 02:47 PM

ace2600

Contributing User

Join Date: Dec 2003

Location: Austin, Texas

Posts: 126

Time spent in forums: 5 h 50 m 34 sec
Reputation Power: 5

I tried the previous code but it only works in Internet Explorer if the #MidBar padding is set to 5. If the padding is set to 0 then the right column starts below and to the right of the left column. The same problem occurs in Mozilla/Firebird no matter what the padding is set to. Even worst, in Mozilla/Firebird the LeftColumn and RightColumn are not contained in MidBar.

Here is my Style Sheet:

Code:

#TitleBar
{
    position: relative;
    left:0px;
    top:0px;
    width:98.5%;
    margin: 0px;
    padding: 5px;
    border: 1px solid #333399;
}
#Midbar 
{
    position: relative;
    left:0px;
    top:0px;
    width:98.5%;
    margin: 0px;
    /*If padding is 0, will not work in Explorer*/
    padding: 5px;
    border: 1px solid #333399;
}

#LeftColumn 
{
    float: left;
    width: 50%;
    border: 1px solid #FF0000;
}
#RightColumn 
{
    float: right;
    width: 50%;
    border: 1px solid #FF0000;
}

#BottomBar
{
    position: relative;
    left:0px;
    top:0px;
    width:98.5%;
    margin: 0px;
    padding: 5px;
    border: 1px solid #333399;
}

My HTML looks like this:

Code:

<body>
<div id="TitleBar">title</div>
<div id="Midbar">
    <span id="LeftColumn">Left</span>
    <span id="RightColumn">Right</span>
</div>
<div id="BottomBar">bottom</div>
</body>

January 15th, 2004, 02:51 PM

Markisdee

****ing running

Join Date: Dec 2003

Location: Not typing in a location. Damn.

Posts: 2,022

Time spent in forums: 3 Weeks 2 Days 2 h 21 m 36 sec
Reputation Power: 218

why not just do it while making your table with colspan="2"?

January 15th, 2004, 03:24 PM

ace2600

Contributing User

Join Date: Dec 2003

Location: Austin, Texas

Posts: 126

Time spent in forums: 5 h 50 m 34 sec
Reputation Power: 5

Do you mean using a 2 column table with merged top and bottom bars? That works, but I want to do this without tables.

Last edited by ace2600 : January 15th, 2004 at 03:33 PM.

January 16th, 2004, 12:31 AM

kk5st

Thanks Johnny Hart (BC) R.I.P.

Join Date: May 2003

Location: Dallas

Posts: 4,585

Time spent in forums: 1 Month 2 Days 16 h 15 m 18 sec
Reputation Power: 662

Since floats have been brought up, here's a float example.

For more info, see Glish.

Quote:

Even worst, in Mozilla/Firebird the LeftColumn and RightColumn are not contained in MidBar.

Actually, that is correct behavior. Floats are wierd. They don't take up space on their own. For a much better explanation than I can ever give, see /*PIE*/.

cheers,

gary

__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

My html and css workshop, demos and tutorials.
Ask a better question, get a better answer.

January 16th, 2004, 07:20 AM

Akh

|<.+#f@#+.&.|

Join Date: Mar 2002

Location: norway

Posts: 2,685

Time spent in forums: 4 Weeks 6 h 6 m 4 sec
Reputation Power: 594

Code:


css:
#TitleBar, #Midbar, #BottomBar
{
    position: relative;
    width:98.5%;
    margin: 0px;
    padding: 5px;
    border: 1px solid #333399;
}


#LeftColumn, #RightColumn
{
    float: left;
    width: 49.8%;
    border: 1px solid #FF0000;
}

html:

<div id="TitleBar">title</div>
<div id="Midbar">
    <div id="LeftColumn">Left</div>
    <div id="RightColumn">Right</div>
	<div style="clear:both;"></div>
</div>
<div id="BottomBar">bottom</div>

January 16th, 2004, 12:21 PM

ace2600

Contributing User

Join Date: Dec 2003

Location: Austin, Texas

Posts: 126

Time spent in forums: 5 h 50 m 34 sec
Reputation Power: 5

Thank you for the help. Unfortunetly I have too many issues with CSS doing what I want when tables do it just fine. So I'm going for a hybrid of tables mixed with CSS.

-Brandon

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: