Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Page Layout 1

Status
Not open for further replies.
ice78991

ice78991

Programmer
Nov 20, 2006
216
I have been trying to achieve the following layout


Title

Link1 Link2 link3

MoreLinks1 Content Content Content Content Content
MoreLinks2 Content
MoreLinks3


Footer

-----------

My code is however onconsistent. It works fine on ie7 but FireFox1.5 pushes the content down below the MoreLinks section.

I am fairly new to css - would tables be a better option?



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"<html>
<head>
<style type="text/css">
<!--

.centered{
width:600px;
margin-left:auto;
margin-right:auto;
}


.title{
background-color:#0000FF;
width:600px;
margin-left:auto;
margin-right:auto;
}

.centInline{
text-align:center;
}

.links{
background-color:#FF00FF;
width:600px;
margin-left:auto;
margin-right:auto;

}

.leftbox{
background-color:#00FFFF;
margin-top :50px;
margin-right :50px;
float:left;
}

.rightbox{
background-color:#00FF00;
margin-top :50px;
float:left;
height:200px;

}

.footer{
background-color:#0000FF;
width:600px;
margin-top:50px;
margin-left:auto;
margin-right:auto;
border-top:1px solid #FFFFFF;
clear:both;
}

-->
</style>
</head>

<body style="margin:0;padding:0">
<div class="title"><p class="centInline">Title</p></div>
<div class="links">Link1 | Link2</div>
<div class="centered">
<div class="leftbox">MoreLinks1<br>MoreLinks2<br>MoreLinks3<br></div>
<div class="rightbox"><p class="centInline">Content Content Content Content Content Content Content Content Content Content Content Content </div>
</div>
<div class="footer"><p class="centInline">Footer</p></div>
</body>
</html>
 
Sort by date Sort by votes
You might try floating your rightbox to the right and assigning %widths to left and right boxes (or specific widths so they'll fit in the 600 px centered div)

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Upvote 0 Downvote
Well, if I was doing it, and I'm not always right, I'd take the float off the right box and set a left margin equal to the width of the left box plus a bit. I would set a width for the left box and remove the 50px of right margin. (Only the left box needs to be floated).

Also, if the div "centered" was a wrapper (perhaps even call it wrapper) and moved to enclose all the other divs, you'd set the width there and not have to keep repeating it for title, footer, etc.

Just some thoughts ....
 
Upvote 0 Downvote
I have corrected my page layout as below. However, I can only get the layout to center on the page in ie7 if I include text-align:center in the body tag. I'm not sure if this is a good idea even though it works since I am trying to center divs and not necessarily text.

Secondly, my footer is not rendering as expected in either FF or ie. In FF it does not center and in both ie and ff it has no background color. In addition it is meant to be 50px below the div above it yet setting its top margin has no effect in either browser. Hopfully I can sort these problems out and convert with confidence to css !

Here's the code

<html>
<head>
<style type="text/css">
<!--
/* screen width 700px */
.wrapper{
width:700px;
margin-left:auto;
margin-right:auto;
}


.title{
background-color:#0000FF;
}

.centInline{
text-align:center;
}

.links{
background-color:#FF00FF;
}

.leftbox{
background-color:#00FFFF;
margin-top :50px;
text-align:left;
width : 150px;
float:left;
}

.rightbox{
background-color:#00FF00;
margin-top :50px;
margin-left : 200px; /* left box width plus a bit *?
height:200px;
}

.footer{
background-color:#00FFFF;
margin-top:50px;
border-top:1px solid #FFFFFF;
clear:both;
}

-->
</style>
</head>

<body style="margin:0;padding:0;text-align:center;">
<div class="wrapper">
<div class="title"><p class="centInline">Title</p></div>
<div class="links">link1 | link2</div>
<div class="leftbox">MoreLinks1<br>MoreLinks2<br>MoreLinks3<br></div>
<div class="rightbox"><p class="centInline">Content Content Content Content Content Content Content Content Content Content Content Content </div>
<div class="footer"><p class="centInline">Footer</p></div>
</div>
</body>
</html>
 
Upvote 0 Downvote
If margins set to auto on each side of the wrapper do not center your page, you have forgotten to add a doctype to your page and it is being rendered in quirks mode. That is about the worst thing you can do to cross-browser compatibility and I suggest you add a doctype first and see how much that changes your page layout.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
204
lmcate
lmcate
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
206
tyutghf
tyutghf
dvannoy
  • Locked
  • Question
Simple Layout
Replies
3
Views
155
vacunita
vacunita
Carlvic
  • Locked
  • Question
How can i make layout 2 columns 2
Replies
3
Views
151
Carlvic
Carlvic
pendle666
  • Locked
  • Question
Inserting same line of text of every web page - &quot;link&quot; insert? 1
Replies
6
Views
220
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top