PDA

View Full Version : CSS Fluid Boxes



chrisfromboji
May 2nd, 2010, 04:36 AM
Ok, so I'm designing a new website template and I've run into a problem.
I figured out how to make a fluid content box that's made out of a top, middle, and bottom piece that spans the desired width. That works great.

I tried to apply the same concept to basically what amounts to a fluid height, two column setup using the two boxes for the columns. It works fine when I only have the middle pieces. But when I put in the top and bottom pieces for each box they don't sit where they are supposed to like the aforementioned working box.

Here is a link to the template page: http://www.stuorg.iastate.edu/akpsi/test/
Here is a link to the css file: http://www.stuorg.iastate.edu/akpsi/test/default.css

The css of interest is:


/*==================Content - Two Fluid Height Content Column Boxes==================*/
#leftbox_top {
float:left;
position:relative;
display:block;
width:450px;
height:24px;
margin-top:0px;
margin-left:20px;
background-image: url('images/columnbox_top.png');
}
#leftbox_background {
float:left;
position:relative;
display:inline-block;
width:450px;
height:auto;
padding-top:5px;
padding-right:10px;
padding-bottom:10px;
margin-top:0px;
margin-left:20px;
background-image: url('images/columnbox_background.png');
background-repeat: repeat;
padding-bottom:15px;
}
#leftbox_bottom {
float:left;
display:inline-block;
position:relative;
width:450px;
height:28px;
margin-left:20px;
background-image: url('images/columnbox_bottom.png');
}
#rightbox_top {
float:right;
position:relative;
display:block;
width:450px;
height:24px;
margin-top:10px;
margin-right:10px;
background-image: url('images/columnbox_top.png');
}
#rightbox_background {
float:right;
position:relative;
display:inline-block;
width:450px;
height:auto;
padding-top:5px;
padding-right:10px;
padding-bottom:10px;
margin-right:10px;
background-image: url('images/columnbox_background.png');
background-repeat: repeat;
padding-bottom:15px;
}
#rightbox_bottom {
float:right;
display:inline-block;
position:relative;
width:450px;
height:28px;
margin-right:10px;
background-image: url('images/columnbox_bottom.png');
}


I am open to suggestions or solutions to remedy this problem.
Thanks

akeane
May 2nd, 2010, 04:48 AM
Are you still interested in solving this problem?

chrisfromboji
May 2nd, 2010, 04:50 AM
Yes, the problem is currently unresolved.

Excavator
May 2nd, 2010, 07:20 AM
Hello chrisfromboji,
3 years and no joy yet?

When making columns like that, yours is basically just a 2-column layout, it helps to separate right from left.
Have a look at how it can work when we put the right elements in a right floated container and the left elements in a left floated container -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Alpha Kappa Psi - Delta Omega Chapter</title>
<style type="text/css">
#superwrap {
background-color: #0D2C72;
text-align: left;
width: 966px;
margin-left:auto;
margin-right:auto;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
text-align: left;
color:#d89124;
font-size:16pt;
padding-left:35px;
position:relative;
font-style:italic;
}
p {
margin-top:15px;
overflow:auto;
padding-left:45px;
padding-right:20px;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
color:black;
font-size:12pt;
}
A:link {text-decoration: underline; color:#FFFFFF;}
A:visited {text-decoration: underline; color:#FFFFFF;}
A:active {text-decoration: underline; color:#FFFFFF;}
A:hover {text-decoration: none; color:#FCF141;}
/*==================Header Construct==================*/
#hconstruct {
width:966px;
margin-top:0px;
height:166px;
}
#headercore {
height:124px;
width:949px;
margin-top:0px;
margin-left:9px;
background-image:url('http://www.stuorg.iastate.edu/akpsi/test/images/header_core.png');
}
#headerlefttall {
height:124px;
width:9px;
margin-top:-124px;
background-image: url('http://www.stuorg.iastate.edu/akpsi/test/images/header_lefttall.png');
}
#headerrighttall {
height:124px;
width:8px;
margin-top:-124px;
margin-left:958px;
background-image: url('http://www.stuorg.iastate.edu/akpsi/test/images/header_righttall.png');
}
/*==================Header Menu Wrapper==================*/
#hmwrapper {
margin-top:-42px;
width:967px;
}
/*Header Menu Buttons*/
a#t_home {
display: block;
width: 133px;
height: 42px;
background-image: url('http://www.stuorg.iastate.edu/akpsi/test/images/home.png');
background-position: 0 0;
margin-left:9px;
margin-top:-42px;
}
a#t_home:hover {
background-position: 0 -42px;
}
a#t_about {
display: block;
width: 133px;
height: 42px;
background-image: url('http://www.stuorg.iastate.edu/akpsi/test/images/about.png');
background-position: 0 0;
margin-left:142px;
margin-top:-42px;
}
a#t_about:hover {
background-position: 0 -42px;
}
a#t_actives {
display: block;
width: 133px;
height: 42px;
background-image: url('http://www.stuorg.iastate.edu/akpsi/test/images/actives.png');
background-position: 0 0;
margin-left:275px;
margin-top:-42px;
}
a#t_actives:hover {
background-position: 0 -42px;
}
a#t_pledges {
display: block;
width: 133px;
height: 42px;
background-image: url('http://www.stuorg.iastate.edu/akpsi/test/images/pledges.png');
background-position: 0 0;
margin-left:408px;
margin-top:-42px;
}
a#t_pledges:hover {
background-position: 0 -42px;
}
a#t_gallery {
display: block;
width: 133px;
height: 42px;
background-image: url('http://www.stuorg.iastate.edu/akpsi/test/images/gallery.png');
background-position: 0 0;
margin-left:541px;
margin-top:-42px;
}
a#t_gallery:hover {
background-position: 0 -42px;
}
a#t_links {
display: block;
width: 133px;
height: 42px;
background-image: url('http://www.stuorg.iastate.edu/akpsi/test/images/links.png');
background-position: 0 0;
margin-left:674px;
margin-top:-42px;
}
a#t_links:hover {
background-position: 0 -42px;
}
a#t_contactus {
display: block;
width: 133px;
height: 42px;
background-image: url('http://www.stuorg.iastate.edu/akpsi/test/images/contactus.png');
background-position: 0 0;
margin-left:807px;
margin-top:-42px;
}
a#t_contactus:hover {
background-position: 0 -42px;
}
a .alt { display: none; }
/*==================Header Menu Spacers==================*/
#header_leftspacer {
margin-left:0px;
margin-top:42px;
height:42px;
width:8px;
background-image: url('http://www.stuorg.iastate.edu/akpsi/test/images/header_leftspacer.png');
}
#header_leftspacer2 {
margin-top:-42px;
margin-left:8px;
height:42px;
width:1px;
background-image: url('http://www.stuorg.iastate.edu/akpsi/test/images/header_leftspacer2.png');
}
#header_rightspacer {
margin-left:940px;
margin-top:-42px;
height:42px;
width:26px;
background-image: url('http://www.stuorg.iastate.edu/akpsi/test/images/header_rightspacer.png');
}
/*==================Content==================*/
#content_background {
position:relative;
display:inline-block;
width:966px;
height:auto;
background-image: url('http://www.stuorg.iastate.edu/akpsi/test/images/body_background.png');
background-repeat: repeat;
}
#content_bottom {
position:relative;
display:block;
width:966px;
height:14px;
background-image: url('http://www.stuorg.iastate.edu/akpsi/test/images/body_bottom.png');
}
/*==================Content - Fluid Height Content Box==================*/
#contentbox_top {
position:relative;
display:block;
width:925px;
height:24px;
margin-top:30px;
margin-left:20px;
background-image: url('http://www.stuorg.iastate.edu/akpsi/test/images/contentbox_top.png');
}
#contentbox_background {
position:relative;
display:inline-block;
width:925px;
height:auto;
padding-top:5px;
padding-right:10px;
padding-bottom:10px;
margin-top:0px;
margin-left:20px;
background-image: url('http://www.stuorg.iastate.edu/akpsi/test/images/contentbox_background.png');
background-repeat:repeat-y;
padding-bottom:15px;
}
#contentbox_bottom {
display:inline-block;
position:relative;
width:925px;
height:28px;
margin-left:20px;
background-image: url('http://www.stuorg.iastate.edu/akpsi/test/images/contentbox_bottom.png');
}
/*==================Content - Two Fluid Height Content Column Boxes==================*/
#left {
width: 450px;
margin: 0 0 0 20px;
float: left;
}
#leftbox_top {
width:450px;
height:24px;
background: url('http://www.stuorg.iastate.edu/akpsi/test/images/columnbox_top.png');
}
#leftbox_background {
margin: 0;
padding: 5px 10px 15px 0;
background: url('http://www.stuorg.iastate.edu/akpsi/test/images/columnbox_background.png');
}
#leftbox_bottom {
width:450px;
height:28px;
background: url('http://www.stuorg.iastate.edu/akpsi/test/images/columnbox_bottom.png');
}

#right {
width: 450px;
float: left;
margin: 0 20px 0 0;
}
#rightbox_top {
width:450px;
height:24px;
background: url('http://www.stuorg.iastate.edu/akpsi/test/images/columnbox_top.png');
}
#rightbox_background {
margin: 0;
padding: 5px 10px 15px 0;
background: url('http://www.stuorg.iastate.edu/akpsi/test/images/columnbox_background.png');
}
#rightbox_bottom {
width:450px;
height:28px;
background: url('http://www.stuorg.iastate.edu/akpsi/test/images/columnbox_bottom.png');
}
/*==================Content - Two Column Text Areas==================*/
.leftcolumn
{
float: left;
width: 400px;
margin-left:0px;
display: inline;
}
.rightcolumn
{
float: right;
width: 400px;
margin-left:0px;
display: inline;
}
/*==================Content - Page Title Image==================*/
#c_welcome {
width:142px;
height:30px;
background-image: url('http://www.stuorg.iastate.edu/akpsi/test/images/welcome.png');
position:relative;
top:25px;
left:45px;
}
/*==================Build the Footer==================*/
#footer_construct {
margin-top:10px;
margin-bottom:10px;
margin-left:15px;
text-align: left;
color:white;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
</style>
</head>
<body id="superwrap">
<div id="hconstruct">
<div id="headercore"></div><div id="headerlefttall"></div><div id="headerrighttall"></div>
<div id="hmwrapper">
<div id="header_leftspacer"></div>
<div id="header_leftspacer2"></div>

<a id="t_home" href="#"><span class="alt">Home</span></a>
<a id="t_about" href="#"><span class="alt">About</span></a>
<a id="t_actives" href="#"><span class="alt">Actives</span></a>
<a id="t_pledges" href="#"><span class="alt">Pledges</span></a>
<a id="t_gallery" href="#"><span class="alt">Gallery</span></a>
<a id="t_links" href="#"><span class="alt">Links</span></a>

<a id="t_contactus" href="#"><span class="alt">Contact Us</span></a>
<div id="header_rightspacer"></div>
<div id="content_background">
<div id="c_welcome"/></div>
<div id="contentbox_top"></div>
<div id="contentbox_background">
<h1>Full Width Text</h1>
<p>This is a text box and the text in this portion will reach accross the length of the box. It will probably wrap and
continue on the next line. The two column div classes below should be unaffected by this.</p>

<div class="leftcolumn">
<h1>Left Column Div Class</h1>
<p>insert text here</p>
</div>
<div class="rightcolumn">
<h1>Right Column Div Class</h1>
<p>insert text here</p>

</div>
</div>
<div id="contentbox_bottom"></div>
<div id="left">
<div id="leftbox_top"></div>
<div id="leftbox_background">
<h1>Left Column Box</h1>
<p>insert text here</p>
</div>
<div id="leftbox_bottom"></div>
<!--end left--></div>
<div id="right">
<div id="rightbox_top"></div>
<div id="rightbox_background">
<h1>Right Column Box</h1>
<p>insert text here</p>
</div>
<div id="rightbox_bottom"></div>
<!--end right--></div>
<div id="content_bottom"/></div>
<div id="footer_construct">
&copy; 2010 Alpha Kappa Psi, Delta Omega Chapter, Iowa State University. All Rights Reserved.
</div>
</body>
</html>

There are still some other things to fix, check with the validator.

chrisfromboji
May 2nd, 2010, 08:42 AM
Thanks! That did the trick.