Layout Question (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility



Message

BillM -> Layout Question (12/6/2006 1:29:01)

Hi,

Very new to CSS.

Cannot get these pesky boxes to line up !

I want the boxes on this page to line up side by side.

http://www.creditcardforu.co.uk/test.htm

A+B

C+D

I want A+B on one, line side by side, and underneath C+D lined up the same, side by side.

Regards

Bill



Tailslide -> RE: Layout Question (12/6/2006 2:57:11)

Hi Bill

Try adding this: 
.infoboxpurple {border: dotted 2px #e8b8fe;width:200px;float:left; margin-right:10px;}


What you have to do to get divs to line up next to each other is to "float" them left or right. When you float a div you need to assign it a specific width (can be a % in this case it's a px value). I've added a right margin to the boxes to move them away from each other. You'll probably need to mess with them a bit to get the exact measurements you need. This was tested briefly in FF.

(BTW - IE has a bug where it sometimes doubles the margins of adjacent floats so a floating div might end up being 20px from it's neighbour rather than 10px. If you find this happening to you, adding "display:inline" to the CSS rule will get round it)



BillM -> RE: Layout Question (12/6/2006 22:54:17)

Hi Tailside

That worked perfectly !

I find some of this CSS tough going but the end results are so much better and the load times are amazing.

I really really appreciate your help.

Regards

Bill



Tailslide -> RE: Layout Question (12/7/2006 2:32:43)

No problem Bill - glad it worked. There are some annoying little issues that it takes a while to get used to. You may be already doing this, so sorry if I'm preaching to the converted but the best idea is to use Firefox as your benchmark when coding (with the web developer toolbar installed - it's vital for us!) then check in Opera and fix for IE - try it the other way around and you'll turn prematurely grey!



BillM -> RE: Layout Question (12/7/2006 8:02:21)

Yikes !!

I had know idea about all this, never even seen firefox before !

Will certainly download it and Opera and restart my project.

Many thanks for that.

Bill



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625