content get out from the border

Forum Moderators: not2easy

Message Too Old, No Replies

content get out from the border

ghid

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

Hi,

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">

<html>

<head>

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

</head>

<body>

<div class="big">

<ul id="menu">

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

</ul>

</div>

</body>

</html>

And the .css code

*{

margin: 0px;
padding:0px;

}

html,body {

background-color:pink

}

.big {

margin: 10% 20% 20% 20%;
background-color:blue;

}

#menu {

list-style:none;
border-style:solid;

}

#menu li {

float:left;

}

The <li> elements go out from border limits.

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

DrDoc

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.

ghid

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?

lucy24

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.

ghid

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

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

lucy24

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.

Paul_o_b

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

Hi,

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. :)