Pulling my hair out

Mr.Orb · 12 Jan 2007 at 23:49

Arghhh, I am trying to put 3 divs side by side like:

***********************
*---newslogo----*----------*
**************--rightside-*
*---newstext----*-----------*
************************
*--------footer--------------*
************************

But it turns out like:

The footer is in red, as you can see its not at the bottom, and the rightside doesn't seem to line up...

CSS:

PHP:

#footer {
	background-image:url(images/foldedbottom.png);
	background-repeat:no-repeat;
	width:760px;
	height:26px;
}

#homecontainer {
	width:730px;
	margin-right:30px;
}

#newslogo {
	background-image:url(images/pages/news.png);
	background-repeat:no-repeat;
	background-color:#FFFFFF;
	width:480px;
	height:40px;
	float:left;
}

#newstext {
	background-color:#FFFFFF;
	width:450px;
	margin-left:30px;
	float:left;
 	border-left:solid #0066cc;
 	border-width:1px;
}

#rightside {
	width:250px;
	vertical-align:top;
	background-color:#FFFFFF;
	float:right;
}

HTML:

PHP:

<div id="homecontainer"><div id="rightside">text2<br />sdfsd</div>
<div id="newslogo"></div>
<div id="newstext">text</div>
</div>
<div class="spacer"></div>
<div id="footer"></div>

Can anyone help?

Thanks!

BeatMaster · 12 Jan 2007 at 23:55

CSS:

Code:

 #footer {
    background-image:url(images/foldedbottom.png);
    background-repeat:no-repeat;
    width:760px;
    height:26px;
}

#homecontainer {
    width:730px;
    margin-right:30px;
}

#leftside {
   float:left;
   width:480px;

#newslogo {
    background-image:url(images/pages/news.png);
    background-repeat:no-repeat;
    background-color:#FFFFFF;
    width:480px;
    height:40px;
}

#newstext {
    background-color:#FFFFFF;
    width:450px;
    margin-left:30px;
    border-left:solid #0066cc;
    border-width:1px;
}

#rightside {
    width:250px;
    vertical-align:top;
    background-color:#FFFFFF;
}

HTML:

Code:

<div id="homecontainer">
  <div id="leftside">
    <div id="newslogo"></div>
    <div id="newstext">text</div>
  </div>

  <div id="rightside">text2<br />sdfsd</div>
</div>

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

Added a leftside div which holds the logo and the text. Hopefully that should fix everything

BeatMaster

Mr.Orb · 13 Jan 2007 at 00:01

didn't work

looks the same

EDIT: now looks like

lozza · 13 Jan 2007 at 01:29

CSS:

Code:

#homecontainer {
    width:730px;
    background: #FFFFFF;
    margin-right: auto;
    margin-left: auto;
    padding-top: 40px;
}
#leftcolumn {
    background-color:#FFFFFF;
    width:475px;
    float: left;
}
#rightcolumn {
    width:240px;
    background-color:#FFFFFF;
    float:right;
    padding-left: 5px;
    padding-right: 5px;
}
#footer {
    width:730px;
    height:26px;
    clear: both;
    background: #0000FF url(images/foldedbottom.png) no-repeat;
    color: #0099FF;
}
#newslogo {
    width:475px;
    height:40px;
    background: #0000FF url(images/pages/news.png) no-repeat;
}
#newstext {
    background-color:#FFFFFF;
    width:445px;
    clear: left;
    border-left: 1px solid #0066cc;
    padding-top: 10px;
    padding-left: 30px;
}
body {
    background-color: #000000;
    margin: 0px 0px 0px 0px;
}

HTML:

Code:

<div id="homecontainer">
  <div id="leftcolumn">
	<div id="newslogo">News Logo goes here </div>
	<div id="newstext">text</div>
  </div>
  <div id="rightcolumn">text</div>
  <div id="footer">Copyright 2007 blah blah </div>
</div>

See here mr orb test

Mr.Orb · 13 Jan 2007 at 22:45

Ah right brilliant, thank you so much