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 4 of 4
  1. #1
    Senior Coder
    Join Date
    May 2006
    Posts
    1,680
    Thanks
    28
    Thanked 4 Times in 4 Posts

    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:
    PHP 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 AuthorJohn 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.

    .
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    You need to float the elements. Block elements will not stack up alongside each other without float.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #3
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Having same problem

    Thanks much for posting this I have the same error and was looking for the solution I have joined this gold bullion company as a junior coder and have to look for many solutions as I am not very experieced anyways thanks for saving my time and i really love the forum


    Quote Originally Posted by jeddi View Post
    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:
    PHP 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 AuthorJohn 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.

    .

  • #4
    Senior Coder
    Join Date
    May 2006
    Posts
    1,680
    Thanks
    28
    Thanked 4 Times in 4 Posts
    No problem mrburgers
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.


  •  

    Posting Permissions

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