General Question

bluemukaki's avatar

Can I put a SPAN inside a DIV?

Asked by bluemukaki (4318 points ) 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

Vincentt's avatar

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.

adrianscott's avatar

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

Perchik's avatar

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

felipelavinz's avatar

what Perchik said.. <span> is also an inline element, but since you don’t need them, you should get rid of them

bluemukaki's avatar

Ok it’s working. Thanks, I got rid of the spans and added overflow: auto; and that seems to have worked!

Answer this question

Login

or

Join

to answer.

This question is in the General Section. Responses must be helpful and on-topic.

Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
or
Knowledge Networking @ Fluther