Can I put a SPAN inside a DIV?

Asked by bluemukaki (4332

) February 5th, 2008

I’m trying to build a site where a series of icons are displayed inside a white box, with a footer below them, but whenever i make my browser window thinner, the icons which are contained within a DIV cllapse down the page so they still fit, but the background DIV they are in doesn’t expand with them. What am I doing wrong?

HTML Code:
<div class=“container”>
<!—- begin icons—>
<span class=“bookmark”><a href= ‘http://google.com’ target=‘_blank’>
<img src=‘images/icon.png’ border=0 id=‘ico_15’ width=‘160’ height=‘145’><br>google.com</a></span>
<span class=“bookmark”><a href= ‘http://google.com’ target=‘_blank’>
<img src=‘images/icon.png’ border=0 id=‘ico_15’ width=‘160’ height=‘145’><br>google.com</a></span>
<span class=“bookmark”><a href= ‘http://google.com’ target=‘_blank’>
<img src=‘images/icon.png’ border=0 id=‘ico_15’ width=‘160’ height=‘145’><br>google.com</a></span>
</div>

CSS Code:
.container {
min-height: 300px;
background-color: #FFFFFF;
text-align: center;
}

.bookmark {
color: #00A4D5;
font-size: 12px;
left: 5%;
right: 5%;
float: left;
}

This is my first foray into DIV and CSS so I’m probably doing something stupid…

Observing members: 0

Composing members: 0

5 Answers

Not sure if this will work (a demo page would be nice), but it often does. Add the following line to your CSS for .container:

overflow: auto;

Also note that you do not need to enclose them in a <span> – you already have the <a> element which is also inline as opposed to block-level like <div>s.

Vincentt (8094

)“Great Answer” (2

) Flag as…

Make sure you end up clearing your floats at the bottom (just before your closing DIV tag) using style=“clear:both;”.

adrianscott (621

)“Great Answer” (1

) Flag as…

I’d really like to see a demo page to explain the problem. It could be any number of things. (one of which being the browser itself.) As Vincentt said, you do not need the span tags at all. You can still use the style, just apply it to the <a> element instead of the span element. ex. <a href=“www.google.com” class=“bookmark” ...> Another problem is that you have the same id for each bookmark, which could may cause problems later. Once you get rid of the spans, you can get rid of the float:left line because <a> is inline (as vincentt said) meaning that it functions like text. If there are too many on a line, they will fall to the next line.

If the problem still exists after getting rid of the spans come back. :D

Perchik (4992

)“Great Answer” (1

) Flag as…