homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

content get out from the border

 9:08 am on Jun 22, 2013 (gmt 0)


I have a problem with content that don't want to stay in a border.

It's about the <li> elements whitin <ul>.

I put the code bellow:

.php code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">



<link rel="stylesheet" type="text/css" href="border.css" >



<div class="big">

<ul id="menu">

<li> <a href="#"> abc </a> </li>
<li> <a href="#"> abc </a> </li>





And the .css code


margin: 0px;


html,body {



.big {

margin: 10% 20% 20% 20%;


#menu {



#menu li {



The <li> elements go out from border limits.

Please help me if you can, thank you very much.



 10:06 am on Jun 22, 2013 (gmt 0)

Welcome to WebmasterWorld!

The problem here is that floats are removed from the flow, causing the parent to collapse. If you use
display: inline-block instead of float: left you avoid this problem.

 10:41 am on Jun 22, 2013 (gmt 0)

Yes, if I remove the floating, the <li> remains within border, but I want that my <li> elements to be aligned horisontaly. How I do that please?

Thank you?


 10:57 am on Jun 22, 2013 (gmt 0)

Edit: I type slow, so this was written before your post.

Lists are a pain. I have been bitten more times than I can count by a generic
{padding: some-small-number-on-all-sides;}
that turns out to have unintended consequences when it comes to list items.

I've never found the exact numbers in writing-- it may be up to the browser-- but list items have an inherent left padding. It's where the marker lives. Or, uhm, the absence of a marker if you're not using one.

Make a fresh html document, put in some nonsense lists and include this in the CSS:

ul {background-color: inherit; border: 1px solid blue;}
li {background-color: inherit; border: 1px dotted red;}

You can use a background-color instead of a border; either way, the padding will jump out and hit you in the face.


 11:07 am on Jun 22, 2013 (gmt 0)

I don't understand, you say that is impossible to fit list within borders?


 12:23 pm on Jun 22, 2013 (gmt 0)

It's not impossible, but you have to be very careful with the padding.

For border purposes, all my current browsers interpret "list" as "container holding all the list items, plus empty space on the left". But my ancient copy of MSIE interprets "list" as "the set of all its items, exclusive of empty space on the left". I really hope this is not true of any MSIE in current use. If it is, you're in conditional-comment territory. Ugh.


 2:58 pm on Jun 22, 2013 (gmt 0)


Your border is on #menu which is the parent of the list items and as mentioned already your lists items are floated and therefore removed from the flow so the parents height is zero and the parent's border will not encompass the child floats.

You could as already mentioned us display:inline-block on #menu which will create a new block formatting context and as such will automatically contain child floats and solve your problem. However inline-block leaves white space gaps (and needs a hack for ie7 and under) and therefore if you don't need visible overflow it's eaasier to just add overflow:hidden to #menu instead.

Overflow other than visible also creates a new block formatting context and elements in this context automatically enclose (contain) their child floats.

If you need visible overflow then use the "clearfix" method of clearing floats (just google it) and that will solve the problem also. :)

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved