CODEWITHSUNDEEP
csshtml
artaxerxe
artaxerxe

Reputation: 6411

Table layout with div

I have a problem that I cannot resolve, so if is anyone who can help me, appreciate:


________________________________________________________________________________
|       body                                                                    |
|                                                                               |
| ___________   _______________________________________________________________ |
| |          | |                                                               ||           
| |  div B   | |                                                               ||
| |          | |                                                               ||
| |__________| |                                                               ||
|              |     div C                                                     ||
|              |                                                               ||
|              |                                                               ||
|              |                                                               ||
|              |                                                               ||
|              |                                                               ||
|              |                                                               ||
|              |_______________________________________________________________||
|_______________________________________________________________________________|

here is my code for this:


<body>
...
<div style="float: left;">...</div>
<div style="float: left;">...</div>
...
</body>

The problem is that anytime when I put in div C text that is more wide - as quantity - than div C (look in drawn outline), the div C changes its position under div B, on the whole body width.

So, can anybody tell me how to make div C not change its position, without specifying any size value (I mean numerical values)?

Thanks!

N.B. I tried to put div B and div C in a display:block or display:inline-block div, but without any results

Upvotes: 0

Views: 411

Answers (3)

Marat Tanalin
Marat Tanalin

Reputation: 14123

Use negative margins or display: table/table-cell.

Upvotes: 1

Abhidev
Abhidev

Reputation: 7253

Have you specified widths to div B and div C ? if not then, try this

.divB, .divC{ width:50%;}

If you don't specify widths to the divs, then the divs will adjust according to the content inside them.

Upvotes: 0

Vivek Chandra
Vivek Chandra

Reputation: 4358

Solution 1: width fix

If your setting the width of both of them with percentage say 10% and 90% .. you can get rid of this problem by using overflow:hidden|scroll|auto on the div C

Solution 2: Position Fix

make the parent's position:relative and the div C css setting

.divC{
position:absolute
top:0
right:0
}

Upvotes: 1

Related Questions