Easy? CSS row layout 1

rockofvictory · Apr 13, 2004

I'm trying to get several "boxes" of text to line up, fluidly, along one row. I can't figure out how to do this without absolute/percentage width. I want to set it up this way so that people can both resize text in their browser as well as resize the window without the rows getting cut off. I'd like the "logo", "description", and "login" to be in one row, simply side-by-side. Also, I'd prefer to set "login" apart, aligning it to the right.

http://zepfanman.com/temp/rows.html

Hopefully this is a pretty simple solution, but I'm just starting to convert my page from tables to css. Instead of getting more of a headache I figured I could get a quick answer here!

~

http://Zepfanman.com/Equality

jammer1221 · Apr 13, 2004

if I get what your saying this should work

Code:

<style>
#div1 {float:left;} //To make it look prettier you can add a width ... width:33% Note:you have to do it to all of them;
#div2 {float:center}
#div3 {float:right}
</style>
<div id="div1">Div 1 (left)</div>
<div id="div2">Div 2 (center)</div>
<div id="div3">Div 3 (right)</div>

I think that will work if not post back and i'll see what I did wrong.
Jammer1221

rockofvictory · Apr 13, 2004

No, that's not quite what I need. Notice that row 3 is on a new line? I've modified that file and updated it, so you can see what I've done. I know the background is ugly, but it helps show the layout better.

Also, what if I wanted four or five elements in that one row? left, center, right.... what about the other two?

Maybe I need to read up on "float".... Thanks for your prompt reply, though!

Foamcow · Apr 14, 2004

This does sound like a candidate for a table.

ChrisHirst · Apr 14, 2004

float:center ?

use all as float:left; or right as the case may be and em for the font sizes

Code:

<html>
<head>
<title>Float Left</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.box1 {
	background-color: #CCCC66;
	height: 200px;
	width: 200px;
	font-size:1em;
	text-align:center;
	border: 2px solid #CC0000;
	margin:0px 5px 5px 0px;
	float:left
}
-->
</style>
</head>

<body>
<div class="box1">1</div>
<div class="box1">2</div>
<div class="box1">3</div>
<div class="box1">4</div>
</body>
</html>

demo

http://www.candsdesign.co.uk/tutorials/css/float/

Chris.

Indifference will be the downfall of mankind, but who cares?

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Easy? CSS row layout 1

rockofvictory

IS-IT--Management

jammer1221

Programmer

rockofvictory

IS-IT--Management

Foamcow

Programmer

ChrisHirst

IS-IT--Management

Similar threads

Part and Inventory Search

Sponsor