12 replies [Last post]
yetiboy
Offline
Enthusiast
UK
Last seen: 15 years 17 weeks ago
UK
Joined: 2005-09-21
Posts: 88
Points: 0

Hey guys I have a three column liquid layout and I was wondering if you guys would be able to advise me in making a change.

The layout consists of

A Header

3 Columns (different sizes)

A Footer

I want to be able to split the third column into 3 rows. So I guess I need 2 extra div's inserting into the page.

But Im not sure on the CSS to get the divs to sit right and maintain its liquid state.

I have attached a file of how I would like the layout to look.

In addition my code so far below:

(MANY THANKS) Yetiboy

/* CSS Document */

body{
background-color: white;
}

p {
font-size: 0.8em;
}

#background
{background-color:#0066CC;}

#header
{
position: relative;
margin: 0 3%;
height: 100px;
background-color: #FF0000;
margin-bottom: 5px;
}


#col1
{
float: left;
width: 25%;
margin-left: 3%;
display: inline;
background-color:#999999;
}

#col2
{
float: left;
width: 35%;
margin-left: 3%;
background-color:#999999;
}

#col3
{
float: left;
width: 28%;
margin-left: 3%;
background-color:#999999;
}

#footer
{
height: 50px;
margin: 0 3%;
margin-top: 5px;
background-color: #FF0000;
clear: both;
}


/* Class */

.imgFeature
{
margin: 5px;
float: left;
}

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">


<head>
<title> XHTML SAMPLE </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css" media="screen">
@import "cnc.css";
</style>

</head>





<body>

<div id="header"></div>

<div id="col1"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p></div>
<div id="col2"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p></div>
<div id="col3">
  <p><img src="gfx/home/image.jpg" alt="Outside image" name="imgFeature" class="imgFeature" id="imgFeature"/></span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>

<div id="footer"></div>

</body>
</html>

Tim (yetiboy)

yetiboy
Offline
Enthusiast
UK
Last seen: 15 years 17 weeks ago
UK
Joined: 2005-09-21
Posts: 88
Points: 0

dare I say it but should I be using tables?

Dare I say I should be using tables within the righthand side div?

(col3) ?

Any input would be great guys...

Tim (yetiboy)

ro88o
ro88o's picture
Offline
Enthusiast
Manchester, UK
Last seen: 14 years 19 weeks ago
Manchester, UK
Joined: 2005-06-29
Posts: 202
Points: 0

Changing a 3 column liquid layout

Quote:
Dare I say I should be using tables

No Tongue

If you already have the three column liquid layout then you could just put 3 new divs in your current right-hand div.

www.nubornis.com
Web Development and E-commerce Solutions.

yetiboy
Offline
Enthusiast
UK
Last seen: 15 years 17 weeks ago
UK
Joined: 2005-09-21
Posts: 88
Points: 0

so i nest the divs...

Quote:
just put 3 new divs in your current right-hand div

So do I just simply nest new 3 new divs within the main right hand side div?

Thanks

Tim (yetiboy)

ro88o
ro88o's picture
Offline
Enthusiast
Manchester, UK
Last seen: 14 years 19 weeks ago
Manchester, UK
Joined: 2005-06-29
Posts: 202
Points: 0

Changing a 3 column liquid layout

Yep that's what I'd do.

www.nubornis.com
Web Development and E-commerce Solutions.

yetiboy
Offline
Enthusiast
UK
Last seen: 15 years 17 weeks ago
UK
Joined: 2005-09-21
Posts: 88
Points: 0

but..

ok cool,

but i want within them nested divs to have a image and text wrapped around the image.

<div id="col3">

<div id="feature1"><img src="gfx/home/image.jpg" alt="Test" class="imgFeature"/><p>Lorem ipsum dolor sit amet</p></div>
<div id="feature2"><img src="gfx/home/image.jpg" alt="Test" class="imgFeature"/><p>Lorem ipsum dolor sit amet</p></div>
<div id="feature3"><img src="gfx/home/image.jpg" alt="Test" class="imgFeature"/><p>Lorem ipsum dolor sit amet</p></div>

</div>

When I do this because i am in a liquid layout the whole right column messes up.

Any ideas?

Tim (yetiboy)

ro88o
ro88o's picture
Offline
Enthusiast
Manchester, UK
Last seen: 14 years 19 weeks ago
Manchester, UK
Joined: 2005-06-29
Posts: 202
Points: 0

Changing a 3 column liquid layout

What do you mean by 'messes up' ?

www.nubornis.com
Web Development and E-commerce Solutions.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Changing a 3 column liquid layout

if it messes up you'll need to fix the column width won't you? or prevent it reducing too far.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

yetiboy
Offline
Enthusiast
UK
Last seen: 15 years 17 weeks ago
UK
Joined: 2005-09-21
Posts: 88
Points: 0

ok... in firefox , safari the layout looks fine.

In firefox nd safari the site layout looks fine...

but in IE it messes up as shown in the attachment.

Tim (yetiboy)

ro88o
ro88o's picture
Offline
Enthusiast
Manchester, UK
Last seen: 14 years 19 weeks ago
Manchester, UK
Joined: 2005-06-29
Posts: 202
Points: 0

Changing a 3 column liquid layout

Have you applied any CSS to the new divs so far ? And also what is the CSS for 'imgFeature' ?

Are the images going to be a set size ? If they are you could just set the height and min-height attributes of the containing divs.

www.nubornis.com
Web Development and E-commerce Solutions.

yetiboy
Offline
Enthusiast
UK
Last seen: 15 years 17 weeks ago
UK
Joined: 2005-09-21
Posts: 88
Points: 0

Changing a 3 column liquid layout

That is the CSS i have currently

/* CSS Document */

body{
background-color: white;
}

p {
font-size: 0.8em;
}

#background
{background-color:#0066CC;}

#header
{
position: relative;
margin: 0 3%;
height: 100px;
background-color: #FF0000;
margin-bottom: 5px;
}


#col1
{
float: left;
width: 25%;
margin-left: 3%;
display: inline;
background-color:#999999;
}

#col2
{
float: left;
width: 35%;
margin-left: 3%;
background-color:#999999;
}

#col3
{
float: left;
width: 28%;
margin-left: 3%;
background-color:#999999;
}


#feature1
{
background-color:red;
padding:5px;
min-height:101px;!important
}

#feature2
{

background-color:blue;
padding:5px;
min-height:101px; !important
}

#feature3
{
background-color:green;
padding:5px;
min-height:101px; !important
}




#footer
{
height: 50px;
margin: 0 3%;
margin-top: 5px;
background-color: #FF0000;
clear: both;
}


/* Class */

.imgFeature
{
float: left;
padding-right:3px;
margin:0px;
border:0px;
}

This is the XHTML is have below:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">


<head>
<title> XHTML SAMPLE </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css" media="screen">
@import "cnc.css";
</style>




</head>





<body>

<div id="header"></div>

<div id="col1"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div id="col2"><p>
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>



<div id="col3">

<div id="feature1"><img src="image.jpg" alt="Test" class="imgFeature"/><p>Lorem ipsum dolor sit amet</p></div>
<div id="feature2"><img src="image.jpg" alt="Test" class="imgFeature"/><p>Lorem ipsum dolor sit amet</p></div>
<div id="feature3"><img src="image.jpg" alt="Test" class="imgFeature"/><p>Lorem ipsum dolor sit amet</p></div>

</div>


<div id="footer"></div>

</body>
</html>

thanks for this

Tim (yetiboy)

ro88o
ro88o's picture
Offline
Enthusiast
Manchester, UK
Last seen: 14 years 19 weeks ago
Manchester, UK
Joined: 2005-06-29
Posts: 202
Points: 0

Changing a 3 column liquid layout

I think the problem you're having is that you're floating your images so it pulls them out of the natural flow which means the div containing them doesn't resize it's height to contain them.

If the images are always going to be a certain height then just make sure the feature divs have height AND min-height set to a value bigger than the height of the pictures.

Alternatively you could add overflow: hidden to the containing div to make your feature div always contain the image - info on this and other methods here: http://garyblue.port5.com/webdev/floatdemo.html

www.nubornis.com
Web Development and E-commerce Solutions.

yetiboy
Offline
Enthusiast
UK
Last seen: 15 years 17 weeks ago
UK
Joined: 2005-09-21
Posts: 88
Points: 0

setting the height

Hi,

setting the height seemed to do the trick thanks for your help on all this.

Tim (yetiboy)