2 Replies - 922 Views - Last Post: 19 December 2009 - 03:24 PM

#1 johnd07  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 32
  • Joined: 22-January 09

Help aligning boxes

Posted 18 December 2009 - 04:59 PM

Hey guys, i'm having a problem aligning three rounded corners boxes I created from a tut I found online... I tried using tables to do it but once i place the code for the box into the row it gets all messed up.. they are displaying like
[]
[]
[]

and I would like them to display like [][][]

here's the code

<div style="position:relative;"><div style="margin-top:3px; margin-left:10px;"><img src="images/WGO.png" /></div><br />
	<div style="margin-left:10px; color:#FFFFFF" >SEARCH</div>
	<div>
<div class="liquid-roundside" >
 
  <div class="center-content">
	<!-- CONTENT BEGIN -->
	<p align="left">Wazzup</p>
	<!-- CONTENT END -->
  </div>
  <div class="top"><span></span></div>
  
		  <div class="bottom"><span></span></div>
</div>
<div class="liquid-roundcenter" >
 
 <div class="top"><span></span></div>
  
		  <div class="center-content">
   
			  <!-- CONTENT BEGIN -->
 <p align="left">Wazzup</p>
	   
  
			  <!-- CONTENT END -->
</div>
<div class="bottom"><span></span></div>
</div>

<div class="liquid-roundside2" >
 
 <div class="top"><span></span></div>
  
		  <div class="center-content">
   
			  <!-- CONTENT BEGIN -->
 <p align="left">Wazzup</p>
	   
  
			  <!-- CONTENT END -->
</div>
<div class="bottom"><span></span></div>
</div>
</div>


Is This A Good Question/Topic? 0
  • +

Replies To: Help aligning boxes

#2 Cbeppe  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 31
  • View blog
  • Posts: 216
  • Joined: 16-September 09

Re: Help aligning boxes

Posted 19 December 2009 - 04:24 AM

I'm not really sure what you mean here. There are no boxes in the code you gave me, only three lines of "Wazzup". Also, your "Search" title is white, something I'm not really sure you want.

However, if you want your three lines to display horizontally instead of vertically, here is how you do it.

<div class="liquid-roundside" >
<ul style="list-style-type:none; width:90%;"><!--take away this style attribute if you want a small dot next to each word-->
<li style="position:relative; float:left; width:30%;"><a style="position:relative; float:right; width:100%">Wazzup</a></li>
<li style="position:relative; float:left; width:30%;"><a style="position:relative; float:right; width:100%">Wazzup</a></li>
<li style="position:relative; float:left; width:30%;"><a style="position:relative; float:right; width:100%">Wazzup</a></li>
</ul>
</div>
<div id="clear" style="clear:both">



I'm not 100% sure that's what you wanted, but I hope it helps. I would also recommend putting all the style values into a proper style sheet and link to it at the top.

I hope it helps.
Was This Post Helpful? 0
  • +
  • -

#3 hiddenghost  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 39
  • View blog
  • Posts: 621
  • Joined: 15-December 09

Re: Help aligning boxes

Posted 19 December 2009 - 03:24 PM

Use span instead of div and don't use tables.
Do those two things and your stuff will line up like so [ ][ ][ ].

Sometimes less is more.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1