Best IT Recipes

Fixed div width on the left, fill the remaining div width on the right

I want a div with a fixed image size on the left and a variable width div with a background color, which should increase its width by 100% on my device. I can not stop the second div from overflowing my fixed div.

When I add overflow: hidden in the width div variable, it just bounces under the photo in the next line.

How can I fix this correctly (i.e. without hacks or markers on the left, since I will need to respond to the site later using media queries, and I need to change the image with different resolution images for each device)?

  • novice web designer trying to solve the horror of responsive websites -

HTML:

<div class="header"></div> <div class="header-right"></div>

CSS

 .header{ float:left; background-image: url('img/header.png'); background-repeat: no-repeat; width: 240px; height: 100px; } .header-right{ float:left; overflow:hidden; background-color:#000; width: 100%; height: 100px; }
+51
css css-float overflow fixed-width variable-width
04 Oct
source share
2 answers

Try removing float:left and width:100% from .header-right - then the right div will behave as required.

 .header { float: left; background: #efefef; background-repeat: no-repeat; width: 240px; height: 100px; } .header-right { overflow: hidden; background-color: #000; height: 100px; } 
 <div class="header"></div> <div class="header-right"></div>

+56
04 Oct
source share

with css grid you can achieve this easier

  • you need to wrap these divs in a shell, say parent
  • give .parent display: grid
  • give grid-template-areas in .parent and grid-area in both children
  • no need to use float: left in both children adjust width of left div using grid-template-columns in .parent

 .parent { display: grid; grid-template-columns: 240px 1fr; grid-template-rows: auto 1fr; grid-template-areas: "header-left header-right"; } .header { background-image: url(img/header.png); background-color: #ebebeb; background-repeat: no-repeat; height: 100px; grid-area: header-left; } .header-right { overflow: hidden; background-color: #000; width: 100%; height: 100px; grid-area: header-right; } 
 <div class="parent"> <div class="header"></div> <div class="header-right"></div> </div>

css became much more advanced and responded with the help of this advanced css only if it could be useful to someone :)

0
Sep 18 '19 at 13:58 on
source share


More articles:


All Articles