Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,254
Total Threads: 80,792
Total Posts: 566,472
There are 1762 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     HTML/XHTML/DHTML/CSS :

Layout Alignment

Thread title: Layout Alignment
Reply    
    Thread tools Search this thread Display Modes  
07-06-2009, 04:16 PM
#1
LongDogger is offline LongDogger
Status: Junior Member
Join date: Sep 2006
Location: Florida
Expertise:
Software:
 
Posts: 33
iTrader: 0 / 0%
 

LongDogger is on a distinguished road

Send a message via AIM to LongDogger Send a message via MSN to LongDogger

  Old  Layout Alignment

I was wondering if anyone could help my create this varied column layout. You can view the page I need to display properly here.

What's weird is that it display's perfectly fine in IE for once, but Firefox refuses to allow 'Box 5' to align right up against 'Box 2' in the header like it should.

My css code is:
Code:
#wrapper {
	width: 800px;
	height: 100%;
	margin: 0 auto;
}

#one {
	height: 150px;
	width: 800px;
	background: #FFFF00;
	float: left;
}

#two {
	height: 150px;
	width: 700px;
	background: #FF0000;
	float: left;
}

#three {
	height: 250px;
	width: 100px;
	background: #0000FF;
	float: right;
}

#four {
	height: 150px;
	width: 100px;
	background: #00FFFF;
	float: right;
}

#five {
	height: 150px;
	width: 600px;
	background: #EFEFEF;
	float: left;
}

#six {
	height: 200px;
	width: 200px;
	background: #00FF00;
	float: right;
	clear: right;
}

Reply With Quote
07-06-2009, 04:38 PM
#2
LongDogger is offline LongDogger
Status: Junior Member
Join date: Sep 2006
Location: Florida
Expertise:
Software:
 
Posts: 33
iTrader: 0 / 0%
 

LongDogger is on a distinguished road

Send a message via AIM to LongDogger Send a message via MSN to LongDogger

  Old

I solved this literally within five minutes of this post. Dumb mistake.

Don't clear right div 'six' if you're curious. Since it's aligned against div 'five', just float it left. Revised code is below:

Code:
#six {
    height: 200px;
    width: 200px;
    background: #00FF00;
    float: left;
}

Reply With Quote
Reply    


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed