SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with a section not flowing properly

    Hi,

    As far as I can see, there is plenty of room for my
    <section class="rightside"> to display to the right of the <article>

    The containing section is 1000px wide and the
    <article> is 600px and the <section.rightside> is only 300px

    For some reason the <section.rightside> doesn't go to
    the rightside but insists on displaying underneath the <article>

    See it here: My Site

    Here is the HTML:
    HTML Code:
    <header>
    	<section>
    			<h1>Great Lobster Resturants</h1>
    			<h2>The Best Lobster Eating Guide</h2>
    	</section>
    </header>
    
     <section class="container">
    		<article>
    			<h1>Rod and Line Care</h1>
    			<section class="meta">
    				<p>By Author: John Thomas <span class="time">25th August 2012</span></p>
    			</section>	
    			
    			<p>
    			Intro
    			</p>
    	
    			<aside>
    			This is the pullquote - a nice little quotation to peak interest - 80 chars
    			</aside>
    	
    			<p>
    			The main article
    			</p>
    			
    			<p>
    			Conclusion
    			</p>
    		</article>	
    
    		<section class="rightside">
    			<div class="cats">Categories</div>
    			<nav>
    				<ul><li><h3><a href="#">Fishing</a></h3></li>
    <li><h3><a href="#">Dreams</a></h3></li>
    <li><h3><a href="#">Catering</a></h3></li>
    <li><h3><a href="#">Cooking</a></h3></li>
    <li><h3><a href="#">Loose Weight</a></h3></li>
    				</ul>
    			</nav>
    			
    			
    			<div class="cats">Helpful Offers</div>
    			<div>
    				<ul>
    				<li>This is an advert block</li>
    				</ul>
    			</div>
    			
    			<div class="cats">Useful Links</div>
    			<nav>
    				<ul><li><h3><a href="#">Fishing</a></h3></li>
    <li><h3><a href="#">Dreams</a></h3></li>
    <li><h3><a href="#">Catering</a></h3></li>
    <li><h3><a href="#">Cooking</a></h3></li>
    <li><h3><a href="#">Loose Weight</a></h3></li>
    				</ul>
    			</nav>
    		</section>
    
    	</section>
    	
    	<footer>
    		<br>Footer<br>
    	</footer>	
    </body>
    </html>


    And the CSS:


    Code:
    * {
    margin:0 0;
    padding:0 0;
    }
    
    html{
    	height:100%;
    	font-family:helvetica;
    	background:#FFFFFF;	
    	} 		
    h1 {
    	font-family:helvetica;
    	font-size:20px;
    	color:#000000;
    }
    
    h2 {
    	font-family:helvetica;
    	font-size:16px;
    	color:#000000;
    	}
    	
    h3,h4,h5,p,li,a {
    	font-family:helvetica;
    	}  
    
    header, footer {
    	display:block;
    	width:1060px;
    	margin:0 auto;
    	}
    
    header {
    	height:200px;
    	background: blue;
    	border-radius:0px 0px 12px 12px;
    	-moz-border-radius:0px 0px 12px 12px;
    	-webkit-border-radius:0px 0px 12px 12px;
    	}
    header section {
    	display:block;
    	width:1000px;
    	height:150px;
    	background:#FFFFFF;
    	padding:20px;
    	margin:0 0;
    	margin-left:10px;
    	border-radius:0px 0px 12px 12px;
    	-moz-border-radius:0px 0px 12px 12px;
    	-webkit-border-radius:0px 0px 12px 12px;
    	}
    	
    section.container {
    	display:block;
    	width:1000px;
    	margin:0 auto;
    	margin-top:20px;
    	}
    
    aside {
    	display:block;
    	float:right;
    	width:140px;
    	background:green;
    	font-family:giorgia;
    	font-style:italic;
    	font-size:32px;
    	color:#DA1C1C;
    	line-height:25px;
    	padding:15px;
    	margin:20px;
    	border-radius:15px;
    	-moz-border-radius:15px;
    	-webkit-border-radius:15px;
    	}
    	
    section.rightside{
    	display:block;
    	width:300px;
    	}
    
    .cats {
    	text-align:center;
    	font-size:20px;
    	}	
    	
    section.rightside ul {
    	margin-bottom:20px;
    	padding:20px;
    	list-style:none;
    	border:1px solid #AAA;
    	border-radius:12px;
    	-moz-border-radius:12px;
    	-webkit-border-radius:12px;
    	background:#FFF;
    	min-height:200px;
    	}
    
    section.rightside ul li {
    	margin:5px 5px;
    	padding:0 0;
    	position:relative;
    	}
    	
    article {	
    	width:600px;
    	margin:10px 0;
    	}
    	
    article p {
    	font-size:13px;
    	line-height:16px;
    	margin:10px 0;
    	padding-right:20px;
    	}
    
    footer {
    	display:block;
    	clear:left;
    	height:100px;
    	background:red;
    	margin:0 auto;
    	}
    Of course all that can be seen in the source code, but I put it here for convenience.

    Can anyone see why the <section.rightside> is not on the right. ??

    I don't think it needs a float because it should go there as part of the natural flow.

    Must have done something wrong

    Thanks.

    .

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,456
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    You can try something like this:
    Code:
    section.container {
        display: block;    /* unnecessary; can be deleted. */
        margin: 20px auto 0;
        overflow: hidden;   /* ADD. */
        width: 1000px;
    }
    
    article {
        float: left;        /* ADD. */
        margin: 10px 0;
        width: 600px;
    }
    
    section.rightside {
        display: block;     /* unnecessary; can be deleted. */
        float: right;       /* ADD this property OR ... */
        margin-left:700px   /* OR ADD this property (not both). */
        width: 300px;
    }
    
    footer {
        background: none repeat scroll 0 0 red;
        display: block;     /* unnecessary; can be deleted. */
        height: 100px;
        margin: 0 auto;
    }

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    hmmmm...

    actually your structure is a bit iffy. Generally floats must be placed FIRST in the markup, so as Ron pointed out you would need to float article {
    float: left; }. Of course the problem there would be that if you had more than one article they would begin to stack horizontally, untill they rapped around and then your right side would appear to the right or bellow the articles. so what you need is a wrapper element for the articles , which you then would float left. at this point floating the right side would be optional.

    I didn't see if you had a html5 reset or not, but I disagree with ronpat about display:block being optional ( unless you are floating the element). The reason I bring this up is that (other than IE which of course just FUBARs everything) older, non HTML5 capable UAs interpret unknown tags as INLINE. so having a reset is still a prudent idea.

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,456
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Thanks for the note about the unknown tags, Ray. I didn't realize they were interpreted as inline; thought they were interpreted as block.

    Cheers


Bookmarks

Posting Permissions

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