Welcome to WebmasterWorld Guest from 54.198.69.193

Forum Moderators: not2easy

Message Too Old, No Replies

Floating 4 unordered lists side by side

assuming a liquid layout

     
10:28 am on Mar 23, 2009 (gmt 0)

10+ Year Member



I'm trying to position four <ul>s to create menus of links.

I can get them working if I set the width of the UL to 22%, but setting it to 25% as below forces the last <ul> below the others.

I can't set fixed widths (i.e. px) so what can I do, am I forced to use 22% width?

/Steve

Example:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>List OneItem 1Item 2Item 3Item 4</title>

<style type="text/css">
* {
margin: 0px;
padding: 0px;
}

body {
background-color:#F0F0F0;
font-size: 62.5%;
font-family: Verdana, Courier, Tahoma;
}

#footer_box {
float:left;
width: 100%;
background: #EEE;
border-top: 1px #CCC solid;
border-bottom: 1px #CCC solid;
}

#footer_box ul {

width: 25%;
float: left;
padding: 1em;
}

#footer_box li {
width: 100%;
list-style: none;
line-height: 1.4em;
text-align: left;
color:#555;
font-size: 1.2em;
font-weight: bold;
}

#footer_box a {
text-decoration: none;
font-size: 90%;
font-weight: normal;
}

#footer_box a:hover {
text-decoration: underline;
}

#footer p {
clear: both;
color: #999;
font-size: 1em;
text-align: center;
}

</style>

</head>

<body>
<div id="footer">

<div id="footer_box">
<div id="footer_list_holder">
<ul id="footer_list">
<li>List One</li>
<li><a href="/">Item 1</a></li>
<li><a href="/">Item 2</a></li>
<li><a href="/">Item 3</a></li>
<li><a href="/">Item 4</a></li>
</ul>
<ul id="footer_list">
<li>List Two</li>
<li><a href="/">Item 1</a></li>
<li><a href="/">Item 2</a></li>
<li><a href="/">Item 3</a></li>
</ul>
<ul id="footer_list">
<li>List Three</li>
<li><a href="/">1</a></li>
<li><a href="/">2</a></li>
<li><a href="/">3</a></li>
<li><a href="/">4</a></li>
</ul>
<ul id="footer_list">
<li>List Four</li>
<li><a href="/">1</a></li>
<li><a href="/">2</a></li>
<li><a href="/">3</a></li>
</ul>
</div> <!-- end #footer list holder -->
</div> <!-- end #footer box -->

<p>text</p>
<p>text</p>
<p>text</p>
</div><!-- footer -->

</body>

</html>

1:03 pm on Mar 23, 2009 (gmt 0)

10+ Year Member



I think the problems with the footer borders (ive only just glanced at the css and html here), if your trying to set a 1px border and then give its child objects (4 of) 25% width then you will be over by 2 pixels on the horizontal as youve defined a static borders and given a non-static width to the child objects aswell as padding to the child objects (Look for info relating to the BOX model).

[webdesign.about.com ]
[quirksmode.org ]


#footer_box {
float:left;
width: 100%;
background: #EEE;
border-top: 1px #CCC solid; // 1px
border-bottom: 1px #CCC solid; // 1px
}


#footer_box ul {

width: 25%; // Dynamic width
float: left;
padding: 1em; // Dynamic padding
}

Above you have already reserved 2 pixels for the border (thats 1 either side), and given dynamic width and padding so it will throw the last list below the others as there isnt enough room on the horizontal.

Using the percentages of say 20% will produce different results depending on the resolution of the screen its being viewed on, im a bit rusty here but i cant really see a solution for this issue unless you use javascript to actively re-write the width and padding of the child objects depending on the screen resolution whilst taking into account the border widths also, that is if your looking for a pixel perfect solution.

Any other offers on this?

2:42 pm on Mar 23, 2009 (gmt 0)

10+ Year Member



I commented out the borders, to see if that helped - unfortunately it didn't :-(

So I tried removing the 1em padding on the <ul>, which worked for FF and Opera but not IE7. In IE, the rightmost list will now jump in and out of place as I change the width of the browser window. Is this a rounding error?

3:23 pm on Mar 23, 2009 (gmt 0)

10+ Year Member



This is strange because the class fix I have for you is a weird one.

First off you must remove the padding from the UL and style the elements inside the LI

Secondly create a new class (I called it .short) and give the final UL a class. As an example in the CSS do:

.short {margin-left:-1px;}

And in the html for the final UL use:

<ul id="footer_list" class="short">

Now the fix doesn't make much sense to me because usually IE follows the same pattern and gives elements the same conditions all around so a bug where it gives just one solitary pixel more than needed is strange. I would have expected 2 pixel or 10 but an uneven one pixel is strange.

So anyway in IE you have 100% + 1 pixel so remove the 1 pixel and you're set.

7:59 pm on Mar 23, 2009 (gmt 0)

10+ Year Member



Thank you Simon, that works a treat.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month