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 8 of 8
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    51
    Thanks
    6
    Thanked 12 Times in 12 Posts

    <div> tag not lining up next to eachother

    Hi,

    I'm trying to edit this website, and I've looked up online tutorials, and have been trying to create a 2 column layout. I was looking at several websites, and it seemed to me that if I have two <div> tag and use css to put them to left and right, they will appear alongside each other as shown in this website: http://www.barelyfitz.com/screencast...s/positioning/.

    My problem is that no matter what I do, the left navigation bar that I made and the content column will never appear side by side, the content colum will always appear at the bottom.

    What can I do to fix this?

    the code looks like this:

    PHP Code:
    <div class"acctbody">
        <
    div class="cpn">
            <
    ul class="cp_nav">
                <
    li><a href="page1.php">page 1</a></li>
                <
    li><a href="page2.php">page 2</a></li>
            </
    ul>
        </
    div>
        <
    div class="cpc">
            
    content...
        </
    div>
    </
    div
    and the css looks like this

    PHP Code:
    .acctbody{
        
    text-align:center;
        
    padding:3%;
        
    background-color:#ffffff;
    }

    .
    cpn{
     
        
    positionrelative;
         
    width 180px;
         
    left0;
         
    margin-left 1px;
         
    margin-top 1px;
         
    color #000000;
         
    padding 0;
     
    }

    .
    cpn ul {margin:0pxpadding:0px;}
    .
    cpn li {list-stylenone;}
    ul.cp_nav {background:#666;}
    ul.cp_nav li {
     
    border-bottom#fff solid;
     
    border-top#fff solid;
     
    border-width1px;
    }

    .
    cpn a {
     
    color#fff;
     
    cursorpointer;
     
    display:block;
     
    height:25px;
     
    line-height25px;
     
    text-indent10px;                   
     
    text-decoration:none;
     
    width:100%;
    }


    .
    cpc{
        
    position:relative;
         
    top:1px;
         
    right0;
         
    bottom250px;
         
    width:200px;
         
    background-color #0ffff0;
         


  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    positioning is not what you want to use for a column layout.

    Code:
    .clear { clear: both; }
    
    .cpn {
     width: 180px;
     float: left;
    }
    
    .cpc {
     width: 200px;
     float: left;
    }
    Code:
    <div class="acctbody">
     <div class="cpn"></div>
     <div class="cpc"></div>
     <div class="clear"></div>
    </div>

    <div> is display: block; which means it will take up the entire width. all elements below it cannot go next to it because there is not room

    -----------------------
    div
    -----------------------
    -----
    span
    -----
    -----------------------
    p
    -----------------------

    div, p, h1, h2, h3, h4 and most tags are display: block; which means they will fill the width, leaving no room for content below them to come up. span, a, input, img are display: inline; which means they do not fill the width. they only fill the width they take up. in this case, we are floating the <div> to the left, which makes it only take up the space it needs. then we are floating the next one to the left, so that it only takes what it needs. finally we added a clear, so that everything below them will STAY below them.
    Last edited by Sammy12; 08-03-2011 at 04:25 AM.

  • Users who have thanked Sammy12 for this post:

    ASTP001 (08-03-2011)

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    51
    Thanks
    6
    Thanked 12 Times in 12 Posts
    Okay,

    so I tried both ways. The first thing I tried was to remove the positioning in the css, and made them float to the left. The problem with this is that it goes outside of the <div> block that it is nested in and it doesn't look nice.

    So the second thing I did was to use span instead of div for the navigation bar and the content. What happened here was the navigation bar took up the entire width of the page, and when I specified the width in css, it didn't make it smaller.

    I'm not sure what is wrong...

    Thanks for the help so far!

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    you cant define a width to an inline element try posting your full code so i can see the problem. if this is your full code (including doctype), ill take another look at it. or better yet, upload it to a server so i can see a live view of the problem.

    for your example: isn't this what you wanted?

    Last edited by Sammy12; 08-03-2011 at 05:11 AM.

  • Users who have thanked Sammy12 for this post:

    ASTP001 (08-03-2011)

  • #5
    New Coder
    Join Date
    Aug 2011
    Posts
    51
    Thanks
    6
    Thanked 12 Times in 12 Posts
    Ah, I figured out what I was doing wrong.

    I had forgotten to add the <div style="clear:both;">
    I'm not sure why that fixes the problem, but it contained the other <div> in the container that it was supposed to be kept in!

    Thanks a lot for your help!
    I looked around at many tutorials online and spent hours on this problem... I was so frustrated, and my internet went down right when I posted last...

    Thanks again!

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    when you float an element, it loses its place on the page, so everything underneath it comes creeping up. clearining a float will give its place back on the page. sometimes you actually dont want to clear a float (more commonly seen in position: absolute; though). floating and position: absolute; both take an element out of the flow of the page

  • Users who have thanked Sammy12 for this post:

    ASTP001 (08-03-2011)

  • #7
    New Coder
    Join Date
    Aug 2011
    Posts
    51
    Thanks
    6
    Thanked 12 Times in 12 Posts
    Ah, I think I get it. So that extra <div> was added as an anchor kind of a thing for the parent <div>.

  • #8
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    correct. you can also just set a height to the parent. the children of it will not have a space on the page (since you floated it) however the parent will push the content down. both ways are correct methods (height and clearing) which one to use in certain situations is based on one's opinion.

    however, clearing in my opinion is for things that don't necesarrily have a height (content that is increasing regularly - prevelant on social websites, blogs, any user-inputted stuff). so I typically only use clear when i have to (when a height cannot be defined)

  • Users who have thanked Sammy12 for this post:

    ASTP001 (08-03-2011)


  •  

    Posting Permissions

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