I have a couple of div tags nested within each other and a few span tags nested like below:-
<div id="leftcol"> <div id="tagcloud"> <span class="mytags"><a href="">tag1</a></span> <span class="mytags"><a href="">tag2</a></span> <!-- and a few more spans of the same type --> </div> </div>
Now the issue is that spans overflow their container div tag. Can somebody be kind enough to let me know how to get these spans to be wrapped inside their container div (here the div with the id tagcloud). Both the outer divs have a width of 300px specified.
(Additional info- I have done a CSS reset using the YUI reset-fonts-grids. I am just getting accustomed with CSS.) -The site can be looked at frekshrek.appspot.com... the tag cloud just does not wrap inside its container div
You can use both the span and div tags as a container if you want to make a particular part of the web page distinct and style it differently.
The phrasing elements can only contain other phrasing elements, for example, you can't put div inside span.
Nesting span tags is valid HTML. A span tag is non-semantic markup intended for grouping inline content, and is a valid wrapper for phrasing content. This includes tags like strong , em , time , and etc, but also additional span tags.
Just as it is possible to style content by wrapping a span tag around it, you can also manipulate your content by wrapping it in a span tag. You give it an id attribute and then select it by its id with JavaScript so you can manipulate it.
Other option is to just set your tags to be displayed inline-block:
.mytags { display:inline-block; }
Try declaring float: left;
on the .mytagcloud
class. Something like:
.mytagcloud{ float: left; margin: 5px; font-family: 'Reenie Beanie', arial, serif; }
in your basiclayout.css
file, line 71.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With