Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: Div Positioning

  1. #1
    New to the CF scene
    Join Date
    Jun 2005
    Location
    California of the States
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Div Positioning

    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. 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?

  • #2
    New Coder
    Join Date
    Jul 2005
    Location
    127.0.0.1
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    EXACT same problem here

    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

    Forever Grateful....

    Integrated-Tech

  • #3
    Regular Coder
    Join Date
    Aug 2004
    Location
    The US of A
    Posts
    767
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Bryan
    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. 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.

    Code:
    <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:
    Code:
    <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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •