15 replies [Last post]
the_rhino_uk
Offline
Regular
Last seen: 16 years 20 weeks ago
Joined: 2005-07-13
Posts: 20
Points: 0

Hi all,

This is my first post and I have searched for suggestions / ideas to help me but I am not finding anything that I have either tried or doesn't suit what I am trying to do.

I have a design where its basically a top nav, three middle sections and a footer. I did build the site using the top setion, floating the left and middle conent boxes (which need to expaned / colapse with the browser), and the banner ad section on the right (static) with the footer below.

All worked fine until we populated the banner ad section on the right with a lot of banners and the absolute box flows over the top of the footer.

SO I swapped the right banner ad box to float as well and it works fine BUT the gaps between the three middle boxes grow so big on higher res monitors with the browser expanded.

Now although this works fine its not ideal because the white gap between the two content boxes is far too big. I have swapped it about but I just seem to be moving the gap around rather than stopping it because everything is a percentage.

I could chuck up the code but its preaty huge at the mo with the extra content in it.

ANY suggestion are very welcome because many susgestions I have read are either left and right static sizes with an expanding middle.

Many thanks

BonRouge
BonRouge's picture
Offline
Enthusiast
Sendai, Japan
Last seen: 13 years 10 weeks ago
Sendai, Japan
Timezone: GMT+9
Joined: 2005-07-10
Posts: 237
Points: 0

Liquid layout, two left liquid one right static

How about [url=http://bonrouge.com/3c-hf-(lc)fluid.php]this[/url]?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Liquid layout, two left liquid one right static

I am not entirely sure what layout you are after. But this is my guess:

Create a container div, give it a negative right margin equal to (or slightly larger than) the width of your ad column. Float the ad column right, it will place itself neatly in that negative margin.

Place your two main columns as you do currently, but ensure the right hand one has a right margin equal in magnitude to the negative margin on the container but positive.

The footer goes at the bottom of the container div and use clear to ensure it appears below all three columns.

That will give you something like this.

#outerwrap {
  margin-right: -105px;
  width: 100%;
  float: left;
}

#ads {
  float:right;
  width: 100px;
}

#innerwrap {
  margin-right: 105px;
}

#left {
  width: 60%;
  float:left;
}

#middle {
  width: 38%;
  float: right;
}

#footer {
  clear:both;
}

<div id='outerwrap'>
  <div id='innerwrap'>
    <div id='left'> left content goes here</div>
    <div id='middle'> middle content goes here</div>
  </div>
</div>
<div id='ads'> ad content goes here</div>
<div id='footer'>footer stuff</div>

I used an #innerwrap for simplicity. Its not necessary, but it does separate the margin-right from your other two columns.

With slight modifications you should be able to alter the source order of the three content containing divs and preserve the basic layout. As is usual in floated layouts, IE may take some persuasion to get it to behave, that is you may need to force the container elements into its hasLayout mode.

[edit: layout corrected, outerwrap needs floated and ads comes last. example showing it really does work. :oops:]

the_rhino_uk
Offline
Regular
Last seen: 16 years 20 weeks ago
Joined: 2005-07-13
Posts: 20
Points: 0

Liquid layout, two left liquid one right static

Thanks for the replies guys, I have chopped me code down (although its still huge), so you can have a look. The site on that link is just what I am after BUT I dont think my guys are all that keen on using Javascript to control elements of the layout for W3C compliance.

Have a look and if there is anything that I have missed please let me know:

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

/* CSS Document */
body {
margin: 0px;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #FFF;
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
padding: 0px;
}

/* CSS Document */
#top_contanier {
position:relative;
background-image:url("images/top_bkgrd.gif");
height:77px;
background-color:#567DB4;
}

/* Main Nav Class */
#main_nav {
background-image:url("images/nav_bkgrd.gif");
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
height: 30px;
width: 100%;
position:relative;
}

.nav_props {
position:absolute;
top:0px;
height:30px;
visibility:visible;
}

#bottom_box {
background: #A5A5A5;
background-image: url("images/bottom_bar_bkgrd.gif");
background-repeat: repeat-x;
width: 100%;
height: 36px;
position:relative;
}

#bottom_left_box {
background-image: url("images/bottom_bar_left_bkgrd.gif");
background-repeat: no-repeat;
margin: 0px;
padding-left: 25px;
height: 36px;
width:227px;
position:absolute;
left:0px;
}

#bottom_right_box {
text-align:right;
margin: 0px;
padding: 0px;
height: 35px;
width: 365px;
position:absolute;
right:0px;
padding-right:29px;
}

/* Common Main channel styles */
#body_container {
margin-top:5px;
width:auto;
border: 1px solid red;
}

/* Main Left Hand Side Container Box */
#left_container {
text-align: center;
position:relative;
float:left;
width:44%;
margin-left:10px;
border: 1px solid #000;
}


/* Channel Content Boxes */
.channel_container {
margin-bottom:6px;
}


.channel_content {
text-align:left;
padding:5px 10px 10px 10px;
border-left-color:#D2D2D2;
border-left-style:solid;
border-left-width:1px;
border-right-color:#D2D2D2;
border-right-style:solid;
border-right-width:1px;
}

.channel_content img {
float:left;
padding:2px 2px 0px 0px;
margin-bottom: 0px;
}

.channel_content p {
margin-bottom: 0px;
margin-top: 0px;
font-size: 8pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

div.channel_content p.clear {
clear: both;
line-height:0.2;
font-size: 2pt;
}

/* Main Right Hand Side Container Box */
#right_container {
float: right;
width:35%;
border: 1px solid blue;
}

#global_margin_container {
margin-left: 0;
border: 1px solid green;
}


/* Channel Content Boxes */
.global_container {
margin-bottom:6px;
}



.global_content_border {
margin-bottom:6px;
text-align:left;
border-color:#D2D2D2;
border-style:solid;
border-width: 0px 1px 1px 1px;
padding:0px 4px 4px 4px;
}

.global_content {
background-color:#F5F5F5;
line-height:12px;
border: 1px solid #F5F5F5;
}


.global_content img {
float:left;
padding:2px 2px 0px 0px;
margin-bottom: 0px;
}

.global_content p {
line-height:13px;
margin-bottom: 0px;
margin-top: 0px;
font-size: 8pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

div.global_content p.clear {
clear: both;
line-height:0.2;
font-size: 2pt;
}

/******************** END *****************************/

/* Banner Ads Container Box */
#ads_box {
text-align:center;
width:140px;
position:relative;
float:right;
line-height:15px;
border: 1px solid green;
}

/* Footer Container Box */
#footer_container {
margin-top:5px;
text-align:center;
width:100%;
clear:both;
}

#footer_container hr {
border:0;
height:1px;
color:#D2D2D2;
background:#D2D2D2;
margin-left:10px;
margin-right:10px;
}

#footer_text {
line-height:14px;
margin-left:10%;
margin-right:10%;
color:#D2D2D2;
line-height:14px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}

</style>

</head>

<body>

<div id="top_contanier">
Top Stuff
</div>

<div id="main_nav">
Main Nav
</div>

<div id="bottom_box">

<div id="bottom_left_box">
Bottom left Bar
</div>

<div id="bottom_right_box">
Bottom right bar
</div>

</div>

<div id="body_container"> <!-- Body Container box -->
<div id="ads_box"> <!-- Advertisment Boxes -->
<A HREF="#" target="_blank"><IMG SRC="#" BORDER="0" WIDTH="120" HEIGHT="60"></a><br>
<A HREF="#" target="_blank"><IMG SRC="#" BORDER="0" WIDTH="120" HEIGHT="60"></a><br>
<A HREF="#" target="_blank"><IMG SRC="#" BORDER="0" WIDTH="120" HEIGHT="60"></a><br>
<A HREF="#" target="_blank"><IMG SRC="#" BORDER="0" WIDTH="120" HEIGHT="60"></a><br>
<A HREF="#" target="_blank"><IMG SRC="#" BORDER="0" WIDTH="120" HEIGHT="60"></a><br>
<A HREF="#" target="_blank"><IMG SRC="#" BORDER="0" WIDTH="120" HEIGHT="60"></a><br>
<A HREF="#" target="_blank"><IMG SRC="#" BORDER="0" WIDTH="120" HEIGHT="60"></a><br>
<A HREF="#" target="_blank"><IMG SRC="#" BORDER="0" WIDTH="120" HEIGHT="60"></a><br>
<A HREF="#" target="_blank"><IMG SRC="#" BORDER="0" WIDTH="120" HEIGHT="60"></a><br>
</div><!--Close Advertisment Boxes -->

<div id="right_container"> <!-- Right Container box -->

<div id="global_margin_container"> <!-- Global 140 Margin Container box -->

<div class="global_container"> <!-- Global Container with 6px bottom margin -->
<div id="gc_box">
Rounded Boxes top
</div>
<div class="global_content_border">
<div class="global_content">
<img src="separationsnow_sitewide/workers/image1.jpg" width="50" height="50">
<p>
Text Text Text Text Text Text Text Text Text Text
<p class="clear"></p>
</div>
</div>
</div> <!-- Global Container with 6px bottom margin -->


</div> <!-- Global 140 Margin Container box -->

</div> <!-- Close Right Container box -->

<div id="left_container"> <!-- Left Container box -->

<div class="channel_container"> <!-- Channel Container 1 -->
<div id="ch_box">
Rounded Boxes top
</div>
<div class="channel_content">
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
<p class="clear"></p>
</div>
<div id="ch_box">
Rounded boxes bottom
</div>
</div> <!-- Close Channel Container 1 -->

</div> <!-- Close Left Container box -->

</div> <!-- Close Body Container box -->

<div id="footer_container">
<br>
<hr></hr>
<div id="footer_text">
<a href="#">Footer</a> | <a href="#">Footer</a> | <br>
More Footer
<br>
Copyright © 2005
</div>

</body>
</html>

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Liquid layout, two left liquid one right static

You seem to have an awful lot of divs. :?

Separate your html into the bits that fit in the various containers. Take that layout I gave you or BonRouges and drop the html into the appropriate container. Copy in the styles for all the other elements and modify the presentation styles for the containers to match your own requirements.

the_rhino_uk
Offline
Regular
Last seen: 16 years 20 weeks ago
Joined: 2005-07-13
Posts: 20
Points: 0

Liquid layout, two left liquid one right static

Yeah, im trying that now so fingers crossed

All those DIV's are needed tragically because of the design.

Site design has been supplied by a sodding print designers and its a pain to do. Most those nested divs are for additional borders, rounded headers, margins etc...

the_rhino_uk
Offline
Regular
Last seen: 16 years 20 weeks ago
Joined: 2005-07-13
Posts: 20
Points: 0

Liquid layout, two left liquid one right static

Ok I have tride Chris..S's method, and its simiular to one I tired early today when I started from scratch again.

Problem is that its got the same problem I was having today, it all works fine until I stick the images in the ads box on the right (which will be banner ads). In IE the boxes drop down, but it seems ok in other browsers Sad

I couldn't figure out how to solve it before:

<html>
<head>
<title>Untitled Document</title>

<style>
body {
margin: 0px;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #FFF;
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
padding: 0px;
}

#outerwrap {
margin-right: -140px;
width: 99%;
float: left;
border: 1px solid black;
background-color:black;
}

#ads {
float:right;
width: 140px;
border: 1px solid red;
background-color:red;
}

#innerwrap {
margin-right: 140px;
border: 1px solid blue;
background-color:blue;
}

#left {
width: 60%;
float:left;
border: 1px solid yellow;
background-color:yellow;
}

#middle {
width: 38%;
float: right;
border: 1px solid green;
background-color:green;
}

#footer {
clear:both;
border: 1px solid white;
background-color:white;
text-align:center;
border: 1px solid black;
}

</style>

</head>

<body>

<div id="outerwrap">

<div id="innerwrap">
<div id="left">
Channel Content
</div>

<div id="middle">
Middle Content
</div>

</div>
</div>

<div id="ads">
<A HREF="#" target="_blank"><IMG SRC="#" BORDER="0" WIDTH="120" HEIGHT="60"></a><br>
<A HREF="#" target="_blank"><IMG SRC="#" BORDER="0" WIDTH="120" HEIGHT="60"></a><br>
<A HREF="#" target="_blank"><IMG SRC="#" BORDER="0" WIDTH="120" HEIGHT="60"></a><br>
<A HREF="#" target="_blank"><IMG SRC="#" BORDER="0" WIDTH="120" HEIGHT="60"></a><br>
<A HREF="#" target="_blank"><IMG SRC="#" BORDER="0" WIDTH="120" HEIGHT="60"></a><br>
<A HREF="#" target="_blank"><IMG SRC="#" BORDER="0" WIDTH="120" HEIGHT="60"></a><br>
<A HREF="#" target="_blank"><IMG SRC="#" BORDER="0" WIDTH="120" HEIGHT="60"></a><br>
<A HREF="#" target="_blank"><IMG SRC="#" BORDER="0" WIDTH="120" HEIGHT="60"></a><br>
<A HREF="#" target="_blank"><IMG SRC="#" BORDER="0" WIDTH="120" HEIGHT="60"></a><br>
</div>

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

</body>
</html>

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Liquid layout, two left liquid one right static

I guess you mean the gaps are too big again.

Are you hoping for column backgrounds all of the same height and extending down to the footer? And I take it they are not plain backgrounds, but complex ones, graduated, corners etc.

Can you show us an image of what you are seeing and what you would like the page to look like.

the_rhino_uk
Offline
Regular
Last seen: 16 years 20 weeks ago
Joined: 2005-07-13
Posts: 20
Points: 0

Liquid layout, two left liquid one right static

Ok here are a couple of shots

This is my original file and all is fine apart from the gap between the left and middle content. If I adjust the %'s any more the boxes seem to overlap and drop down. The way it is at the moment I bring the browser size up on my screen (I have mine at 1600 x 1200) and the gap become massive and I can't have it like that. If all the gaps grew then thats fine but its just that one gap becoming massive.

This is the code Chris provided and as you can see it all works fine BUT in IE the ad boxes drop down under the others and you get a scroll bar. Seems to work ok in Firefox, but I haven't tried the other browsers yet.

Im going out of my mind here, nothing seems to work!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 day 11 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Liquid layout, two left liquid one right static

You're missing a doctype, so IE displays the page depending on the current rotation speed of the sun, minus the time it takes for the planets to rotate (or the other way round, I can never remember).

Verschwindende wrote:
  • CSS doesn't make pies

the_rhino_uk
Offline
Regular
Last seen: 16 years 20 weeks ago
Joined: 2005-07-13
Posts: 20
Points: 0

Liquid layout, two left liquid one right static

thepineapplehead wrote:
You're missing a doctype, so IE displays the page depending on the current rotation speed of the sun, minus the time it takes for the planets to rotate (or the other way round, I can never remember).

Eh? Sorry what do you mean?

BonRouge
BonRouge's picture
Offline
Enthusiast
Sendai, Japan
Last seen: 13 years 10 weeks ago
Sendai, Japan
Timezone: GMT+9
Joined: 2005-07-10
Posts: 237
Points: 0

Liquid layout, two left liquid one right static

Put this at the top of your page : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd ">

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Liquid layout, two left liquid one right static

for IE you probably need at least three pixels difference between the margin-right values and the width of the ad column. That is for a width of 140px, the margin-right values need to be -143px and 143px. I would go with 145px just to be safe. This is due to IE's 3px bug.

For the page width and gaps. Something doesn't seem right. At a screen width of 1600px, #innerwrap should be about 1550px wide. The 2% you have should equate to about 30px. If its larger than that it sounds like there are some margin or padding styles influencing the page somewhere.

One thing you can do, increase the total width of #left and #middle to 99%. That should support a page widths down to 400px (1% = 4px, enough for the 1px borders around the two divs) whilst only showing a gap of 12px at 1600px.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 day 11 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Liquid layout, two left liquid one right static

the_rhino_uk wrote:
thepineapplehead wrote:
You're missing a doctype, so IE displays the page depending on the current rotation speed of the sun, minus the time it takes for the planets to rotate (or the other way round, I can never remember).

Eh? Sorry what do you mean?

Well, it does say in the rules at the top of each forum, we expect your page to validate, and have a doctype.

You clearly didn't read that part.

Verschwindende wrote:
  • CSS doesn't make pies

the_rhino_uk
Offline
Regular
Last seen: 16 years 20 weeks ago
Joined: 2005-07-13
Posts: 20
Points: 0

Liquid layout, two left liquid one right static

Well, after using Chris' suggestion I have re-done the layout and added the following doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

And that has solved the IE problems.

All is good, and sorry for not looking into the doctype further, I was using :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

and that was messing things up, but I have read that the Transitional one is more relaxed.

Thanks for all the help, onwards and upwards Laughing out loud

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 day 11 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Liquid layout, two left liquid one right static

The second doctype is incomplete. Use the first one.

Verschwindende wrote:
  • CSS doesn't make pies