0

So I have been at this for a little wile and I can't seem to figure it out. I am working on an assignment for my web dev class and for part of it I need to make two lists of links and they need to have a column type feel.

So right now for my HTML I have:

<div id="linkCol1">
       <div class = "colHeading">For Standard Travelers</div>
            <ul>
                <li><a href="#">Standard seating chart</a></li>
                <li><a href="#">Find out why our flights are so unique</a></li>
                <li><a href="#">Read our insurance polic</a></li>
                <li><a href="#">Join our frequent flyer club</a></li>
                <li><a href="#">More Travel Resources...</a></li>
           </ul>
    <div id="linkCol2">
        <div class = "colHeading"> For "Others"</div>
            <ul>
                <li><a href="#">Effect of electromagnetism on travelers</a></li>
                <li><a href="#">Flying with animals</a></li>
                <li><a href="#">Non-Smoking policy</a></li>
                <li><a href="#">More Travel Resources...</a></li>
            </ul>
        </div>
    </div>

And for my CSS (I took out all of the things I thought weren't working):

#linkCol2{
   overflow:hidden;
   float:right;
}

#linkCol1{
   float:left;
   overflow:hidden;
}

Now my page is supposed to look something like this:

http://ista230.com/images/assignments/7/page1.jpg

If you look towards the bottom you can see the to sets of links.

Any help would be great! (CSS 3 and HTML 5)

Greg
  • 737
  • 4
  • 13
  • 21

2 Answers2

1

It's hard when learning, but make a habit of looking at the nesting, you have linkCol2 inside of linkCol1. They can't float properly next to each other, so add a closing div before the linkCol2

helion3
  • 34,737
  • 15
  • 57
  • 100
  • That was it. Sorry if I wasted anyones time. Thanks a lot @BotskoNet – Greg Nov 10 '13 at 05:18
  • Quick follow up. Now since I have floated and taken those divs out of the doc flow they are messing up my footer. I've tried display block but thats having no effect. Any ideas? – Greg Nov 10 '13 at 05:25
  • I'm betting you're having the clear float problem. There are multiple ways to fix it, but try adding a div around the two columns and give that `overflow: hidden`. – helion3 Nov 10 '13 at 05:26
  • awesome, thanks a lot. I've just been looking at the code too long now. I wouldn't have ever seen that unclosed
    from before.
     – Greg Nov 10 '13 at 05:30
  • I used to teach web development so I know all too well how often the closing elements are missed or out of place. – helion3 Nov 10 '13 at 05:31
1

I always have gone with the method of floating everything to the left and never using float right. When you float column A to the left, column B will still display as block unless you specify column B to be float left as well.

Then from that point I simply specify the necessary width, margin, padding etc. to position everything the way that I want. As long as I have the columns in a wrapper div there will be no resizing issues.

If you float both of the divs left and specify their height, width, margin etc. then there should be no issues with the footer being out of place. If the footer is indeed lower or higher than you expect it to be with using float left on both divs, I would imagine it is due to the divs being placed inside another div and the OUTER div needs a height specified in order to push the footer to the bottom.

Justin
  • 164
  • 1
  • 14