Member Avatar for kimmi_baby

Hi,
What I'm wanting to do is create a fixed and fluid layout. I was pretty sure it was possible but I'm not quite sure how to do it.

The layout I want will have 2 columns within a wrap div.

The left column will have 2 divs. The div on the top is the header and the div below is the navigation. This will be the fixed column. This will also be positioned to the very left of the page.

The right column will be the content div. The content div is the one I would like to be fluid. I would like it to expand depending on the size of the screen. The problem I think I'm finding is that the background will be an image (I'm not quite sure how to make this expand or what size I should set the photo).

Any help would be greatly appreciated!!

Edited by kimmi_baby because: n/a
  • 2 Contributors
  • 3 Replies
  • 188 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by MagicMedia

Dani AI

Generated

was right to make the left column a fixed-width block. Two practical patterns will produce a fixed left column and a fluid right column; both also show how to make the content area background scale.

Float-based (broad compatibility)

<div class="layout">
  <aside class="sidebar">
    <div class="site-header">...</div>
    <nav class="main-nav">...</nav>
  </aside>
  <main class="content">Main content here</main>
</div>
/* clearfix */
.layout::after { content: ""; display: table; clear: both; }

.sidebar { float: left; width: 240px; }
.content {
  margin-left: 240px;            /* must match .sidebar width */
  min-height: 100vh;
  background: url("bg.jpg") no-repeat center top;
  background-size: cover;        /* scales and fills the area */
  padding: 20px;
}

Flexbox (simpler, recommended for modern browsers)

.layout { display: flex; align-items: flex-start; }
.sidebar { flex: 0 0 240px; }
.content { flex: 1 1 auto; min-height: 100vh;
  background: url("bg.jpg") no-repeat center top;
  background-size: cover;
  padding: 20px;
}

Notes and troubleshooting

  • background-size: cover scales the image to fill the content area but will crop edges; contain preserves the whole image but may leave gaps.
  • If the background appears not to resize, confirm the selector targets the element that actually has height; min-height or content inside will define that height.
  • Older browsers (IE8 and earlier) do not support background-size; supply an <img> fallback or a polyfill for those rare cases. For images that must retain all visible detail, use an <img> with width:100% and height:auto or object-fit: cover.
  • Use media queries to reduce or collapse the fixed column on small screens.

This addresses the fixed-left / fluid-right layout and the background-scaling issue raised by while building on 's initial suggestion.

Recommended Answers

All 3 Replies

Member Avatar for MagicMedia

You don't need to tell it to expand. Div is fluid by default. All you need to do is wrap the header and the navigation and give the wrapper a fixed width and a left float.

#wrapper {
width:200px;
float:left;
}
Member Avatar for kimmi_baby

So I wrap the div around the header and nav div?

What about the content div? The background image doesn't resize itself on each screen size...
At the moment it's a small image on my massive monitor so it will fit on the smallest screens. That's not what I'm wanting...

Is there a way to make the content div expand?

Member Avatar for MagicMedia

Are you talking about stretching the background or the div? The div should already be stretched by default. If you want to stretch the background, try to read .

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.