How do I align spans or divs horizontally?

Question

My only problem is making them line up three-across and have equal spacing. Apparently, spans can not have width and divs (and spans with display:block) don\'t appear horizo

Answer 1

    <!-- CSS -->
<style rel="stylesheet" type="text/css">
.all { display: table; }
.menu { float: left; width: 30%; }
.content { margin-left: 35%; }
</style>

<!-- HTML -->
<div class="all">
<div class="menu">Menu</div>
<div class="content">Content</div>
</div>

another... try to use float: left; or right;, change the width for other values... it shoul work... also note that the 10% that arent used by the div its betwen them... sorry for bad english :)

Answer 2

I would use:

<style>
.all {
display: table;
}
.maincontent {
float: left;
width: 60%; 
}
.sidebox { 
float: right;
width: 30%; 
}
<div class="all">
   <div class="maincontent">
       MainContent
   </div>
   <div class="sidebox"> 
       SideboxContent
   </div>
</div>

It's the first time I use this 'code tool' from overflow... but shoul do it by now...

Answer 3

I would try to give them all display: block; attribute and using float: left;.

You can then set width and/or height as you like. You can even specify some vertical-alignment rules.

Answer 4

I would do it something like this as it gives you 3 even sized columns, even spacing and (even) scales. Note: This is not tested so it might need tweaking for older browsers.

<style>
html, body {
    margin: 0;
    padding: 0;
}

.content {
    float: left;
    width: 30%;
    border:none;
}

.rightcontent {
    float: right;
    width: 30%;
    border:none
}

.hspacer {
    width:5%;
    float:left;
}

.clear {
    clear:both;
}
</style>

<div class="content">content</div>
<div class="hspacer">&nbsp;</div>
<div class="content">content</div>
<div class="hspacer">&nbsp;</div>
<div class="rightcontent">content</div>
<div class="clear"></div>