I need some help aligning my divs into aligned blocks with css.
The site is http://faucetnthings.com/test2
I’m talking about the footer on bottom.
I need my footer to look more like this
I would really appreciate the time if anyone could help me out and list some corrections on my css , thank you
I tried making the footblock , display:inline
It doesn’t do anything , stills shows the same vertical list of blocks
Hi,
Assuming you don’t mind changing the html I would do something like this.
/* footer blocks */
.foot-block{
float:left;
width:200px;
margin:0 30px 0 0;
display:inline;
}
.foot-block h3{
text-transform:uppercase;
color:#999;
border-bottom:1px dotted #999;
margin:5px 0 4px;
font-size:120%;
}
.foot-block ul{
list-style:none;
margin:0 0 15px;
padding:0;
width:180px;
}
.foot-block li{
line-height:1.4;
text-transform:uppercase;
color:#fff;
}
#footer .foot-block li a,#footer .foot-block li a:visited{
color:#fff;
font-weight:bold;
text-decoration:none;
}
<!-- Footer Starts -->
<div id="footer-wrap">
<div id="footer">
<!-- Footer Widget Area Starts -->
<div class="footer-widgets">
<div class="container col-full">
[B]<div class="foot-block">
<h3>A-Z Index</h3>
<ul>
<li><a href="#">Companies</a></li>
<li><a href="#">Authors</a></li>
<li><a href="#">Tags</a></li>
<li><a href="#">Sitemap</a></li>
</ul>
<h3>A-Z Index</h3>
<ul>
<li><a href="#">Latest</a></li>
<li><a href="#">TBI live</a></li>
</ul>
</div>
<!-- end block -->
<div class="foot-block">
<h3>Lists & Rankings</h3>
<ul>
<li><a href="#">SAI 50</a></li>
<li><a href="#">SA 100</a></li>
<li><a href="#">Sexist CEOS</a></li>
<li><a href="#"More</a></li>
</ul>
<h3>Your Account</h3>
<ul>
<li><a href="#">Register</a></li>
<li><a href="#">Change Your Email</a></li>
<li><a href="#">Preferences</a></li>
</ul>
</div>
<!-- end block -->
<div class="foot-block">
<h3>About BI</h3>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Advertise</a></li>
</ul>
<h3>Follow BI</h3>
<ul>
<li><a href="#">Email newsletters</a></li>
<li><a href="#">RSS</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Linkedin</a></li>
<li><a href="#">Facebook</a></li>
</ul>
</div>
<!-- end block -->
<div class="foot-block">
<h3>Verticals</h3>
<ul>
<li><a href="#">Tech & Telecom</a></li>
<li><a href="#">Media</a></li>
<li><a href="#">Finance</a></li>
<li><a href="#">Macro-Economy</a></li>
<li><a href="#">Green Tech & Energy</a></li>
<li><a href="#">SBM Strategy</a></li>
<li><a href="#">Law Review</a></li>
<li><a href="#">TBI Reserach</a></li>
</ul>
<h3>Tools</h3>
<ul>
<li><a href="#">Stock Quotes</a></li>
<li><a href="#">Job Listings</a></li>
</ul>
</div>
<!-- end block -->[/B]
</div>
</div>
<!-- Footer Widget Area Ends -->
<div class="fix"></div>
</div>
</div>
<!-- Footer Ends -->
The blocks are just dropped inside the footer .container block.
(There are far too many nested and unnecessary divs in that code that make life awkward but I guess that’s wordpress’s fault.)
If you want to use your original and non semantic code you would need to float each block left:
You have an inline style and it is this element that needs the float as shown below:
<div style="margin: 0pt 30px 0pt 0pt; display: block; width: 200px[B];float:left[/B]">
<div id="text-5" class="widget light-widget widget-2colum widget_text ">
<h3 class="widgettitle">A-Z Index</h3>
<div class="textwidget">
<p>COMPANIES<br />
AUTHORS<br />
TAGS<br />
SITEMAP</p>
</div>
</div>
<div id="text-6" class="widget light-widget widget-2colum widget_text ">
<h3 class="widgettitle">Video</h3>
<div class="textwidget">
<p>LATEST<br />
TBI LIVE</p>
</div>
</div>
</div>
You’d have to do that for each of the 4 blocks.
Then you’d need to set the footer to clear:both and contain the floats using overflow:hidden.
#footer{clear:both;overflow:hidden}
But you really shouldn’t be using inline styles and you certainly should break the lines up like this:
<p>COMPANIES<br />
AUTHORS<br />
TAGS<br />
SITEMAP</p>
They are lists of things and should be in a list. As a rule of thumb the only place to use a break is inside forms, addresses, poems and occasionally for visual effect to split a line. The rest of the time there is something better and more semantic to use such a s list in this case.
Please be more explicit with your question as I spent a lot of time working out the exact code for you to use. the code above does exactly what you want and I even styled it to match your drawing.
Adding display:inline is not going to help with aligning the block horizontally and you need to float them as shown in my example above. The above is a full demonstration and you just need to add it into your page so see it working.
Please clarify what you are having trouble with and I’ll try to help.