Forum Moderators: not2easy
<div class="subcategories">
<img src="images/computer/n_projectors4.gif" / style="margin:5px;">
<p align="center">laptops</p>
</div><!-- end of class subcategories-->
<div class="subcategories">
<img src="images/computer/n_vcrdspc.gif" / style="margin:5px;">
<p align="center">laptops</p>
</div><!-- end of class subcategories-->
</div><!-- end of allsub-->
after this div named allsub,any div i add after it become over it,and the page become in a mess..
can anyone help me with that?
First your html: I suppose you'll have an xhtml doctype and then your <img> tags needs to be self-contained, seems it originally was but got messed up somehow.
<img src="images/computer/n_printscanfax4.gif" / style="margin:5px;">
<img src="images/computer/n_printscanfax4.gif" style="margin:5px;" />
Basically the trailing "/" indicates there is no </img> coming to this <img>
Next: in order to help we'll need a bit more CSS you're using on those classes used in your example.
Also: take care which browser you use: while creating your CSS, do yourself a favor and don't use IE, any other browser will be far more efficient. Work around the IE problems after it works in the standard compliant browsers using conditional comments.
[edited by: swa66 at 10:45 am (utc) on Oct. 22, 2008]
.subcategories {
float:left;
margin:10px;
}
should i don`t use many floats in one div?
thanks again 4 help..
First off there typically is no need (unless you use it in other places as well) to put the class on each div in that div with id allsub, neither is there a need to have the margins on all the images, the centering on the paragraphs: dito.
So the html can become:
<div id="allsub">
<div>
<img src="images/computer/n_printscanfax4.gif" />
<p>laptops</p>
</div>
<div>
<img src="images/computer/n_projectors4.gif" />
<p>laptops</p>
</div>
<div>
<img src="images/computer/n_vcrdspc.gif" />
<p>laptops</p>
</div>
[red]<br class="clearing" />[/red]
</div><!-- end of allsub-->
See how clean that is ?
The line in red is something for later, no worries yet.
In CSS we now can use the ID to select it's children.
e.g. #allsub div swill select the same divs as you .subcategoris did (at least if you didn't use the class somewhere else too)
#allsub div {
float: left;
margin:10px;
}
#allsub div p {
text-align: center;
}
#allsub div img {
margin: 5px;
}
note I added the 5px margin to images, and the centering of the paragraphs there as well.
So now that we made it look much neater in code, back to your problem as that's still not solved. A float is supposed to step out of the flow much like an <img ... align="left" /> did. So anything else sits besides it. Now the div with id allsub does not act as a bounding box for it's floated children (those are removed from the flow) [In a standards compliant browser anyway]. In fact your aalsub div will collapse to having no height at all as there's nothing left with in it that's not floated. So to "stretch" the div to contain it, you need to have something in the div that "clears" the floated divs. The <br> I added in red in the html can be used for that:
br.clearing {
clear:left;
}
I've not actually tested it, but I'm pretty confident it'll work, if not do reply with a details about what's wrong.
