Web page layout with three

#1
toldigabor

Posted 05 July 2010 - 06:27 AM

Newbie

Members
9 posts

How can I convert this code so that the 3 columns to fill the pane, but the window width changes in the middle of the box width does not change only the two extremes.


<!DOCTYPE html public "-//w3c//dtd html 4.01 transitional//en">  

<HTML>

 <HEAD>

  <TITLE>Website structure</TITLE>

  <META http-equiv="content-type" content="text/html;charset=iso-8859-2">

 </HEAD>

 <BODY style="text-align: center; width:100%; margin: 0px; padding: 0px">

  <DIV style="background-color: green; width: 150px; height: 600px; float: left">left background</DIV>

  <DIV style="background-color: blue; width: 150px; height: 600px; float: right">right background</DIV>

  <DIV style="background-color: red; width: 500px; height: 600px; margin: 0px auto">content</DIV>

  <DIV style="background-color: yellow; width: 100%; height: 100px; clear: both">footer background</DIV>

 </BODY>

</HTML>

With FRAMES could easily do the * solution, but the technique is no longer worth using.

#2
NastyDevil

Posted 06 July 2010 - 09:52 AM

Learning Programmer

Members
90 posts

Can you post the frames solution as I dont really see what you are trying to do here... I looked at this code and it is a very sloppy design, are you trying to get the effect of the content to always be centered or what? Just post the frames code you think works or describe what you are looking for a little better, i think i will be able to help you out.

#3
Guest_johnny.dacu_*

Posted 07 July 2010 - 08:25 AM

Guests

If i'm not wrong, here is a solution.

.left{
[INDENT]
width:150px;
float:left;
[/INDENT]
}

.center{
[INDENT]
width:100%;
padding: 0 150px;
[/INDENT]
}

.right{
[INDENT]
width:150px;
float:right;
[/INDENT]
}

#4
DarkLordofthePenguins

Posted 15 July 2010 - 11:51 AM

Programming Expert

Members
409 posts

Frames are not very reliable and should be avoided whenever possible. For things like this, I usually just use tables. If you want the divs to be side by side, then display needs to be set to inline for all the divs, as the browser puts a newline between them by default.