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 12 of 12
  1. #1
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    382
    Thanks
    150
    Thanked 2 Times in 2 Posts

    Divide a div in two columns? How to?

    Hello, please take a look at this page.

    As you can see in the top there is a list of links, all red.
    I'd like these links to be in a div big 290px.

    In the right side I'd like to have another div with also links.

    This is how I did so far:

    Code:
      <div class="col2">
      			<div class="mediaomnielist">
    
    				<div class="mediaomnielistleft">
    links - links links - links links - links links - links links - links links - links links - links links - links links - links links - links links - links links - links links - links 
        			        </div>
    
                    <div class="mediaomnielistright">
                             <p>dsagsa</p>
                    </div>
    
        		      </div>
      </div>
    and the css is:
    Code:
    #col2{width:580px; height: auto;}
    .mediaomnielistleft {width:290px; float:left;}
    .mediaomnielistright {width:290px;}

    but it looks like it's not working, because the text <p>dsagsa</p> is showing in the left column.

    Any hints?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello utnalove,
    Add this bit to your CSS -
    Code:
    .mediaomnielistright {
        margin: 0 0 0 290px;
        width: 290px;
    }
    Or this -
    Code:
    .mediaomnielistright {
        overflow: auto;
        width: 290px;
    }
    Based on this example -

    ...

    You will probably need to clear the following element like this -
    Code:
    .companyname {
        background-color: #FFCCFF;
        border-bottom-style: solid;
        border-width: 1px;
        clear: both;
        font-size: 20px;
        font-weight: bold;
        height: 25px;
        text-align: center;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    utnalove (03-30-2013)

  • #3
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    382
    Thanks
    150
    Thanked 2 Times in 2 Posts
    Thanks. It now works... however, isn't there a risk to see the scrollbar appear?

    Isn't it possible to make something simple like this without overflow?


    =============
    Second question. I have decreased the width of the right div. And I put a 2px margin left, because I want a black vertical line to separate the two divs. But as you can see it this line is appearing only next to the title.


    I've put this piece of code on jsfiddle, but here the border is looking to be all around the title.
    Last edited by utnalove; 03-30-2013 at 11:33 PM.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by utnalove View Post
    Thanks. It now works... however, isn't there a risk to see the scrollbar appear?

    Isn't it possible to make something simple like this without overflow?
    There are other ways to clear your floats if you really need to.
    Consider this though, one thing I think is an advantage of usingoverflow: auto; is how it generates a scrollbar when your content is larger than it's container. That's a positive indication you've broken the box-model rule. See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.


    Looking at your page again, it looks like .mediaomnielist should have overflow: auto; and .companyname won't need clear: both;

    Look at CSS clearing floats for further explanation.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    utnalove (03-30-2013)

  • #5
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    382
    Thanks
    150
    Thanked 2 Times in 2 Posts
    I did what you said. Removed the clear from .companyname and moved the overflow to .mediaomnielist, but it looks like it was better before.

    hmm...

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by utnalove View Post
    I did what you said. Removed the clear from .companyname and moved the overflow to .mediaomnielist, but it looks like it was better before.

    hmm...
    Have a look at your .mediaomnelistright and compare that to the two options I suggested in my first reply.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    382
    Thanks
    150
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Excavator View Post
    Have a look at your .mediaomnelistright and compare that to the two options I suggested in my first reply.
    Quote Originally Posted by Excavator View Post
    There are other ways to clear your floats if you really need to.
    Consider this though, one thing I think is an advantage of usingoverflow: auto; is how it generates a scrollbar when your content is larger than it's container. That's a positive indication you've broken the box-model rule. See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

    Oh Yes, I had removed the overflow from .mediaomnelistright, because then you wrote:

    Looking at your page again, it looks like .mediaomnielist should have overflow: auto; and .companyname won't need clear: both;
    and I thought I had to move it from .mediaomnelistright and place it on .mediaomnielist only.

    Now the overflow:auto is in both of those divs.


    Why doesn't border appear in all the div height? I'd like a vertical black line to be in the middle of .mediaomnelistleft and .mediaomnelistright

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by utnalove View Post
    Why doesn't border appear in all the div height? I'd like a vertical black line to be in the middle of .mediaomnelistleft and .mediaomnelistright
    Your right column, .mediaomnielistright, is only as tall as Moje Publikacje.

    To fix it there are a few options:
    -Put your border on the right side of taller .mediaomnielistleft
    -put a height on .mediaomnielistright

    I think the best idea would be to use an image for that line, see faux columns here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    utnalove (03-31-2013)

  • #9
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    382
    Thanks
    150
    Thanked 2 Times in 2 Posts
    Thank you. I did the following:
    Added height:380px; to .mediaomnielist and then I added height:inherit; to both right and left DIVs.

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by utnalove View Post
    Thank you. I did the following:
    Added height:380px; to .mediaomnielist and then I added height:inherit; to both right and left DIVs.
    That works fine as long as the content of that left column isn't going to change.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    utnalove (03-31-2013)

  • #11
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    382
    Thanks
    150
    Thanked 2 Times in 2 Posts
    yeah, you're right. Pity that height:auto doesn't work. But it's ok. I'll change the height when I'll need to make the list bigger.

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by utnalove View Post
    yeah, you're right. Pity that height:auto doesn't work. But it's ok. I'll change the height when I'll need to make the list bigger.
    I still prefer the faux columns method.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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