...

View Full Version : Div Positioning



Bryan
08-26-2005, 04:23 AM
I'm having trouble with positioning, since I'm fairly new to CSS2 (no tables, w00t!). I'm trying to design a template for a website, as you can see here (http://www.risingsunstudios.org/site/). However, there is a problem in Mozilla Firefox: it's outside the container div, which means it is not inside the gray border that is around everything else. I simply can't understand why it won't stay inside the container and content divs. Take a look at the code to see what I mean. Anyone know the solution?

Integrated-Tech
08-26-2005, 05:49 AM
Having the same problem on my site with floating an image "right" where the image's bottom edge extends below my "container" div, which has a dotted border on the top, right side and bottom:

Problem area here (http://integrated-technologies.us/pages/templates.php)

Forever Grateful....

Integrated-Tech

Kurashu
08-26-2005, 06:28 AM
I'm having trouble with positioning, since I'm fairly new to CSS2 (no tables, w00t!). I'm trying to design a template for a website, as you can see here (http://www.risingsunstudios.org/site/). However, there is a problem in Mozilla Firefox: it's outside the container div, which means it is not inside the gray border that is around everything else. I simply can't understand why it won't stay inside the container and content divs. Take a look at the code to see what I mean. Anyone know the solution?

You are floating without a clearing element.

My suggestions: add another div element with no content and style with clear: both; OR add overflow: visible; (I believe that is the correct one, check http://www.quirksmode.org/).

As for your markup, you are forgetting semantics.



<center>
<div class="container">
<div class="header"></div>
<div class="button">

<div id="button1"><br />Home</div>
<div id="button2"><br />Blog</div>
<div id="button3"><br />Projects</div>
<div id="button4"><br />Actors</div>
<div id="button5"><br />About</div>
<div id="button_right">&nbsp;</div>

</div>
<div id="content">
<div id="content-sidebar">Side Menu<br />Side Menu<br />Side Menu<br />Side Menu<br />Side Menu<br />Side Menu<br />Side Menu<br />Side Menu<br /></div>
<div id="content-main">Content<br />Content<br />Content<br />Content</div>

</div>
</div>
</center>


Would be better marked up as:

<div id="container">
<h1><span>Rising Sun Studios</span></h1>
<!-- Use FIR or something to replace the span-->
<h2>*Page Name*</h2>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Actors</a></li>
<li><a href="#">About</a></li>
</ul>

<div id="content">
<div id="sidebar">
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Fusce vel dolor sed leo rhoncus semper. </li>
<li>Praesent at elit dignissim arcu convallis volutpat.</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vel.</p>
</div>
<div id="main">
<h3>Content</h3>
<h4>Article/Entry Title</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur adipiscing elementum nulla. Fusce viverra mauris ac nisi. Integer vulputate metus fringilla tortor. Phasellus tempor, sapien vitae dapibus gravida, massa mauris auctor pede, vel bibendum erat eros sit amet ligula. Maecenas vitae mi. Quisque vel eros. Integer nec erat. Cras ut est. Quisque nisi tortor, posuere non, egestas quis, sodales et, tortor. Nulla posuere vestibulum diam. Quisque fringilla nisl ut nunc. Duis vel lectus mollis massa cursus mollis.</p>
</div>
</div>
</div>

To horizntally center use: margin: 0 auto; and width: < 100%; However, IE doesn't like that so, add the IE hack * html {text-align: center;} and go through and set text-align: (left|right); as needed.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum