Positioning Problems

  • Colinhp1
  • Born
  • Born
  • Colinhp1
  • Posts: 2

Post 3+ Months Ago

I have a website with a container div.
Inside it I have a div 'tabs' floating right.
Beneath this are:
A div 'navigation' floating left (position: relative) which has its top at the same horizontal height as the div 'content' floating right next to it. Directly beneath this div 'content' (with the same fixed width) is a div 'tabs1'.

I want to position a div 'associate' directly underneath the div 'navigation' (same width) however when I do this and view it in a browser the div 'associate' slides up underneath the 'div' navigation .

This is the code:
Code: [ Select ]
<div id="tabs"></div>
<div id="navigation" style="width: 187px; height: 222px; top: 16px; left: 2px;"></div>
<div id="content"></div>
<div id="tabs1"></div>
  1. <div id="tabs"></div>
  2. <div id="navigation" style="width: 187px; height: 222px; top: 16px; left: 2px;"></div>
  3. <div id="content"></div>
  4. <div id="tabs1"></div>


How do I position and set the code for div 'associate' so it doesn't slide underneath the div 'navigation'?
Please see link to site as this may help with my decription.http://www.q3pd.com

Thank you.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • CXLink
  • Expert
  • Expert
  • User avatar
  • Posts: 685
  • Loc: ATL-GA

Post 3+ Months Ago

Could you put navigation and associate inside a separate sidebar div and float that div?
  • paul_l81
  • Beginner
  • Beginner
  • paul_l81
  • Posts: 41

Post 3+ Months Ago

Hey,

I take it you will reference the div associate html code straight after the div navigation code?

If so, you can try and put in the css file for your div#associate, the property of 'clear: left;'

This should make sure that the div associate is put under div navigation.

Hope I understood this correctly?
  • Colinhp1
  • Born
  • Born
  • Colinhp1
  • Posts: 2

Post 3+ Months Ago

Big thanks for the responses.
I restructured the whole page with two column parent divs, and a parent footer div.
Placing the '#navigation' and '#associate' into the first column and then the #content in the second column worked a treat.
Cheers.

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 39 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.