one div at right and one at left with fixed width

Question

thanks guys. its solved. dont answer.

jsfiddle.net/GMLGn/5/

I still dont understand how it worked thought...

no matter how much I try, the black border div does not float to right and get inside the red one (besides the green one that is to left side).

In short I want the green and black look side by side jsfiddle.net/GMLGn/ any ideas?

The code is too long to post here (stack chars limit) and its not feasible to give partial code in current scenario.

can you give me sample image picture here? – Selvamani Jan 03 '13 at 14:12 — Selvamani, Jan 03 '13 at 14:12

score 0 · Answer 1 · answered Jan 03 '13 at 14:03

0

The green border is around #frontpage-image but the .gallery block is not inside that. So it makes sense that the other block won't be put into it.

answered Jan 03 '13 at 14:03

Lasar

5,175
4
24
22

No...
is inside #frontpage-top and #frontpage-top contains both gallary and frontpage- top is red, frontpage-image is green, gallry is black.
– kevin Jan 03 '13 at 14:07
Are you trying to put the black one inside the green one? – Pete Jan 03 '13 at 14:09
No. trying to put them side by side – kevin Jan 03 '13 at 14:10
Ok if you are floating the green one left and the black one right - the width (plus side padding and side margin) of the two added together cannot be more than the containing div so in your case as your black div is 290px (width) + 35px (padding) + 8 - 10px (border), this means your green div must total no more than 765px as your container is 1000px – Pete Jan 03 '13 at 14:16
`#frontpage-image` needs a `float: left` or it's not going to be floated obviously. And then see what Pete said; there's not enough room for both items like this. – Lasar Jan 03 '13 at 14:21

score 0 · Accepted Answer · answered Jan 03 '13 at 14:14

Try this:

.w1{
    margin:0 auto;
    width:1000px;
    padding:0 0 274px;
    /*NEW*/
    position:relative;
}
.gallery{
    width: 290px;
    min-height: 410px;
    padding: 20px 16px 6px 29px;
    line-height: 17px;
    color: #454444;
    background: url(../images/bg-gallery.png) no-repeat;
    border: thick solid rgb(0,0,0);
    /*NEW*/
    position:absolute;
    top:165px;
    right:0;   
}

Test: http://jsfiddle.net/GMLGn/4/

score 0 · Answer 3 · answered Jan 03 '13 at 14:15

0

Use this css in #frontpage-image.

float: left;
width: 64%;

answered Jan 03 '13 at 14:15

Selvamani

7,434
4
32
43

one div at right and one at left with fixed width

3 Answers3