WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > Centered 3 row layout

Reply
  Thread Tools Display Modes
Old 28th April 10, 08:46 PM   #1
juicyy
WLC Member
 
juicyy's Avatar
 
Join Date: Apr 2010
Posts: 1
Default Centered 3 row layout

Hi everyone!

I'm currently trying to achieve a layout such as the one seen below:


Basically, I want three rows, one row with one item, a second row with three items, and the final row will have a menu using Kwicks for Jquery.

The problem I'm having is centering everything both vertically and horizontally and being able to set the margins between the different items.

I've been playing around with different things but nothing seems to really work the way I want it to.

Does anyone know of a basic template I could use? Or any other pointers would be greatly appreciated!

Thanks!
juicyy is offline   Reply With Quote
Old 29th April 10, 06:29 AM   #2
Chris`
WLC Member
 
Join Date: Aug 2008
Location: California
Posts: 41
Default Re: Centered 3 row layout

You could try something like this;
Code:
<div id="wrapper">
	<div id="top"></div>
	<div id="middle">
		<ul>
			<li>firstone</li>
			<li>secondone</li>
			<li>thirdone</li>
		</ul>
	</div>
	<div id="footer">kwiks</div>
</div>
Set the ul list-style to none, and the list items to display inline. If you want me to help further then post a link please.
Chris` is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 06:48 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.