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 gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

XHTML layout problems

Status
Not open for further replies.
JBL312

JBL312

IS-IT--Management
Jan 14, 2004
56
US
Hello,

In the interest of web site accessibility with regard to screen readers I would like to keep my web pages content towards the top of the html file. However I would like the content to display in a different order. The following code might explain better what it is I am trying to accomplish. The web page is being designed around XHTML 1.0 Strict and CSS 2.

Somefile.html
<body>
<div id=”pagewrapper”>
<div id=”pagecontent”></div>
<div id=”pagenav”></div>
<div id=”pageads”></div>
</div>
</body>

Display:
Page Nav Page Content Page Ads


I would like the web page to have a width of 80% and for there to be three columns. From left to right this would be Page Nav, Page Content, and Page Ads. Thus far I have had little luck with this and I am hoping that some one with more experience might be able to help me out. I can produce the desired look if I do not have the web pages content first, but this is really what I want to accomplish. Can some one help me out?
 
Sort by date Sort by votes
If you make the center column's left and right margins wide enough you can then use absolute positioning to place left and right columns on either side.
Code: 
div#pagecontent{margin:0 200px;}
div#pagenav{position:absolute;left:0;width:200px;}
div#pageads{position:absolute;right:0;width:200px;}
/* if you want the whole thing 80% */
body{text-align:center;}
div#pagewrapper{position:relative;margin:0 auto;}
Hopefully this snippet helps you get something going.

Cheers!

News and views of some obscure guy
 
Upvote 0 Downvote
I would like to thank the both of you for your quick responses. I appreciate your help and found the information very helpful. With your help I have been able to produce the desired outcome.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
234
tyutghf
tyutghf
dvannoy
  • Locked
  • Question
Simple Layout
Replies
3
Views
179
vacunita
vacunita
Carlvic
  • Locked
  • Question
How can i make layout 2 columns 2
Replies
3
Views
191
Carlvic
Carlvic
Katerine
  • Locked
  • Question
CSS question: Displaying 2-level unordered lists in a table layout? 1
Replies
7
Views
258
Katerine
Katerine
c0deM0nK424
  • Locked
  • Question
Parent Div, with a less wide Child Div which contains 2 child Div inside - Responsive Layout ? 2
Replies
3
Views
175
c0deM0nK424
c0deM0nK424

Part and Inventory Search

Sponsor

Back
Top