CODEWITHSUNDEEP
cssresponsive-design
Laurent
Laurent

Reputation: 1048

A fixed width block in a fluid layout

In a fluid layout I need in the same line, side by side, a fixed-width block and a fluid width block with a max width. When the window is resized, the fluid width block should resize being "pushed" by the fixed width block.

Here is what I came to achieve: http://cssdesk.com/gHvUB

But sadly the content expands outside its container .....

Anyone ?

Upvotes: 1

Views: 2041

Answers (3)

Alex Morales
Alex Morales

Reputation: 1191

Ok, the easiest way is to set the container to overflow: auto. Then set both child containers to position: absolute. Since the container's position:relative they'll sit inside the parent. Then you need to set the parent's height to something. You can try min-height: (value). I have a sample here.

Hope this helps.

Upvotes: 0

birukw
birukw

Reputation: 33

One way to achieve your goal with the example you gave would be to

  1. Add a right margin of 200px to the fluid box

  2. Add a relative position of -200px to the fixed-width box.

    .line {
   ...
   position: relative;
 }
.fluid {
   ...
   margin-right: 200px;
 }
.fixed-width {
   ...
   position: relative;
   top: 0;
   right: -200px;
 }

Upvotes: 2

brains911
brains911

Reputation: 1310

With css (and especially css3) there are going to be many different ways to achieve this.

Here a couple examples:

example

example

And here on the site:

CSS Layout 2-Column fixed-fluid

Upvotes: 1

Related Questions