Floating 3 Sections on one row?

[MontyV]

I'm guessing this would be someting similar to a 3 column layout but I'm running into some trouble now. I followed the basic instructions here to contruct my row.

http://css.maxdesign.com.au/floatutorial/tutorial0916.htm

Things are not lining up like I'm imagining it to be. My row consists in this order.

1.) A small image (approx 40x40px)
2.) Name of an Object
3.) Two line description. (approx 100px wide)

What I've done is float #1 left then #3 right. I created their respective widths and then created the #2 with the margins for both right and left leaving 25px extra space. So in this case I made margin-left:40px and margin-right:125px.

Is there some other way of doing this or am I missing something here. I guess I'm having a hard time wrapping my head around this. Thank you for any help anyone can provide.

- Monty

[MontyV]

Got it. Used a technique to line up images. Here is the link in case anybody searches.

http://alistapart.com/articles/practicalcss/

Thanks to those who took the time to read my post.

- Monty

[thamba]

Try to specify the 'float: left' property for the #2 div too. That should hold the #3 div in the proper place beside it.

[MontyV]

Try to specify the 'float: left' property for the #2 div too. That should hold the #3 div in the proper place beside it.

Yeah I ended up just doing



div.float {float:left;}

<div class="float"><img>stuff in here 1</img></div>
<div class="float"><h1>stuff in here 2</h1></div>
<div class="float"><p>stuff in here 3</p></div>



Of course I styled as necessary. Anyone know how to get the third item to start all at the same position though? Or any of them for that matter while keeping the float. I mean the first is the same length for all items but then the second has shorter names and longer names so giving it a margin doesn't help lining up the third item. So I wanted to start the item always at the same point so that they line up vertically.

I hope that makes sense. I know this is off my topic, maybe i'll start a new topic if nobody replies.

- Monty

[thamba]

Try not giving float for the third item, or give a float right for the third item.

[MontyV]

Try not giving float for the third item, or give a float right for the third item.

If I don't float the third item it doesn't line up and if I float it right it will still not line up. Also that doesn't help if each item is a different width. I would like the beginning of the item to begin at the exact same point for each one. Much like if you were to use Office Word and tabs are set at exactly the same spot throughout the document. Looking for CSS that will allow me to do this. Thank you for the fast reply.

[thamba]

Can you paste your code along with the css, so I can take a look at it directly in my browser. It would make it easier to fix then.

[MontyV]

These are there respective sections. The float works fine and they are all lined up. I have about 8 of these rows so I would like for each item to line up vertically.


div.coreteam {
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}

div.coreteam img {
margin-right:.25in;
}

div.coreteam h1 {
margin-right:.50in;
margin-top:1em;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#808080;
}

div.coreteam p {
margin-top:1em;
}




<div class="coreteam">
<img src="images/Chess.jpg" />
</div>
<div class="coreteam">
<h1>Pete Patel<br/>Founder | CEO</h1>
</div>
<div class="coreteam">
<p class="coreteam">Pete is a career entrepreneur who grew up in his family hotel business. As a long term hotelier...</p>
</div>

[MontyV]

Ok I got it to work now. I see why it was having a problem. I'm thinking of this all wrong. I guess that is all part of the learning process :) Anyways this is what I did. I added new classes specifically for the third item



div.coreteam {
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}

div.coreteam img {
margin-right:.25in;
}

div.coreteam h1 {
margin-right:.50in;
margin-top:1em;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#808080;
}

div.coreteam p {
margin-top:1em;
}

div.coreteam_info {
float:right;
width:275px;
}

div.coreteam_info p {
margin-top:1em;
font-family:Arial, Helvetica, sans-serif;
font-size:11px
}



Before when I was floating it and it was being bumped over because the width was not specified and some were longer and some were shorter content causing it to be kind of funky. Once I specified the width and floated it right the third item then gave the look I was after, all items vertically aligned.

So your float:right was helpful but just needed one more style. :D Thank You for your help.