3 horizontal boxes aligned with css

HTML & CSS
1

I want to have 3 boxes aligned horizontal with css.

Do I have to make a float left and float right box first, and in one of the floats put again a floatleft and float right?

Or,

is it possible to have 3 divs aligned in such way that they are aligned next to each other?

A tip or start is helpful :slight_smile:

Mathilde

2

are you trying to center the boxes?
if all you are trying to do is have the boxes NEXT to each other you can simply do:

.box{float:left;}/* float:right would also work, but the boxes would be on the right side of the screen*/
<div class="box></div>

tell me if that accomplishes what you were seeking to do

3

dresden_phoenix thanks for the reply.

I want following (example in table view)

<table>
<tr>
<td 1>This one fully aligned left , border 1px, width 256px and between td1, td2 and td3 a margin of 4 px</td1>
<td2>margin left 4px and margin right 4 px, width 256px</td2>
<td3>aligned fully right (margin and padding 0)</td3>
</tr>
</table)

td1 --4px—td2 --4px-- td3

Hope above answers your question.

Mathilde

4

the use something like this:


.left{ float:left;border: 1px solid #000; width:254px; margin-right:4px; background:pink/* 256px -1px left bord, -1px right bord; */}
.right{ float:right; background:pink}
.fauxrow{overflow:hidden; background:silver;}


<div class="fauxrow">
	<div class="left">td1</div>
	<div class="left">td2</div>
     <div class="right"> td3</div>
</div>

( I didn’t give width or border to the bx on the right , because i assume you meant that only the first two boxes had with and the last would all at the right mst of the SCREEN and would have a with of its contents…

i hope I understood you correctly

or maybe you meant this:


.box { float:left;border: 1px solid #000; width:254px; margin-right:4px; background:pink/* 256px -1px left bord, -1px right bord; */}
.fauxrow{float:left; background:silver}
.fauxrow div.bxrgt{margin:0; width:auto; border:none;}

<div class="fauxrow">
	<div class="box">td1</div>
	<div class="box">td2</div>
     <div class="box bxrgt">td3</div>
</div>
5

Thanks for above.

The right box want also aligned against the right of the outer border with a 1px border.

page example: Egypt Travel, Tours & Holidays

how to do such? I tried several but it ends up with a box below the two other boxes.

Mathilde

6

Issue solved.

Thanks for all help.

Mathilde