Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Wrapping span tags inside a div

Tags:

html

css

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

like image 635
rubicondude Avatar asked Sep 26 '10 10:09

rubicondude


People also ask

Can we use span tag inside div tag?

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.

Can a span go inside a div?

The phrasing elements can only contain other phrasing elements, for example, you can't put div inside span.

Can span tags be nested?

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.

Do spans wrap?

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.


2 Answers

Other option is to just set your tags to be displayed inline-block:

.mytags {    display:inline-block; } 
like image 142
Ryan Mohr Avatar answered Sep 25 '22 13:09

Ryan Mohr


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.

like image 33
Valentin Flachsel Avatar answered Sep 23 '22 13:09

Valentin Flachsel