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

Thread: <hr /> issue

  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    28
    Thanks
    4
    Thanked 0 Times in 0 Posts

    <hr /> issue

    I have made two containers at the bottom of a page and I wanted to put a line underneather to separate them. But my line appears above the containers, and i'm not sure why? any ideas?
    heres the html
    Code:
        <div class="homeboxnames">
        	<a href="#">News</a>
        	</div>
        <div class="homeboxnames" style="float:right; margin-right:319px;">
        	<a href="#">Recent Photos</a>
        	</div>
        
        <div class="homeboxes">
        	containers
       		</div>
        <div class="homeboxes" style="float:right;">
        	containers 2
        	</div>
            <hr />
    and the css
    Code:
    .homeboxnames {
    	font-size:20px;
    	text-align:center;
    	display:block;
    	background-color:#FF0000;
    	padding:2px 20px;
    	-moz-border-radius:7px;
    	float:left;
    	margin-bottom:10px;
    }
    .homeboxnames a{
    	text-decoration:none;
    }
    
    .homeboxnames:hover{
    	background-color:#CC33FF;
    	
    }
    	
    .homeboxes {
    	width:490px;
    	height:300px;
    	background-color:#00FF00;
    	float:left;
    	margin-bottom:5px;
    }
    would I have to style the hr tag to appear at the bottom? If so what would it be?
    thanks!

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,634
    Thanks
    0
    Thanked 649 Times in 639 Posts
    All of the divs are floated so that takes them out of the regular flow. The <hr/> tag is not floated so it is still in the regular flow.

    One fix would be to wrap the floated divs inside another div and specify overflow:hidden on that div to force it to contain the floated content. You can then put the <hr/> after that div.

    ps. get rid of the space before the / as that was only necessary when serving the xode as HTML to Netscape 4 and is no longer necessary now that no one uses that browser any more.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    joe2730 (06-13-2012)

  • #3
    New Coder
    Join Date
    Sep 2011
    Posts
    28
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Sorted, and thank you for the advice aswell

  • #4
    Regular Coder Taro's Avatar
    Join Date
    Oct 2011
    Location
    Geraldton, Ontario
    Posts
    155
    Thanks
    1
    Thanked 1 Time in 1 Post
    Based on the attachment, I see that the divs may be floated, as the first container is stuck to the upper left-hand corner. The second container looks fine. Instead, you can try margin positioning, as they can be very precise in determining the correct location of the containers. For example:
    Code:
    #container
    {
    margin-top:100px;
    margin-bottom:100px;
    margin-left:100px;
    margin-right:100px;
    }
    Attached Thumbnails Attached Thumbnails &lt;hr /&gt; issue-untitled.jpg  
    Element ID

    Webs Support Helper

    Your friendly neighborhood Taroman.


  •  

    Posting Permissions

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