Steve Steve - 4 months ago 11
CSS Question

CSS: child element with width of 100% only 50% wide

At this page, a header photo is not displaying full width.



#wrap {
width: 990px;
}
#content-wrap {
display: flex;
}
.image-header {
display: block;
width: 100%;
}
.image-header img {
width: 100%;
height: auto;
}
.container {
position: relative;
width: 960px;
margin: 0 auto;
padding: 0;
}

<div id="wrap">
<div id="content-wrap" class="fluid clearfix" data-content="content">
<!-- /#start content-wrap -->
<div class="image-header">
<img src="https://staging.orsgroup.com.au/eapportal/wp-content/uploads/sites/2/2016/07/ORS-Internals-960x211-EmployServOccu21.jpg" alt="Home Page" title="Home Page">
</div>
<div class="clear"></div>
<div class="container">
<div id="content" class="sixteen columns">
<section class="post-9 page type-page status-publish hentry">

<h1>Home Page</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis tortor vel diam volutpat luctus. Proin placerat nisl nulla, in mattis ex consectetur quis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec vitae enim
vel nibh hendrerit dignissim a et ante. Mauris eget tempus nunc. Donec dignissim elit sed ullamcorper semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis, risus eu varius lacinia, diam tortor volutpat ipsum,
eu luctus neque massa quis leo. Phasellus blandit pellentesque justo non ornare. Cras et elit sit amet quam consequat viverra vel a diam. Pellentesque rutrum, dolor sit amet condimentum dapibus, lorem est dapibus orci, a congue ante ante ac
lectus. Donec maximus pretium venenatis. Cras ex leo, pellentesque in libero sit amet, auctor congue sapien. Aliquam nec mi commodo ipsum sagittis tincidunt. Vestibulum sollicitudin laoreet eros vel finibus. Integer accumsan consectetur neque
eget sodales.</p>
</section>
<!-- #post-## -->
<!-- You can start editing here. -->
</div>
<!-- /#content-wrap -->
<div class="clear"></div>
</div>
</div>
</div>





However,
.image-header
is only displaying around 50% of the width of
#content-wrap
.

I added
width: 100%;
to
#content-wrap
but the issue remains.

I do want to keep the flex model.

Help appreciated.

Answer

Why this is happening

This is because you are using the flexbox model, which is attempting to spread the elements on the same line. There are a couple of ways you can avoid this behaviour:

Allow the content to wrap

By default flex-wrap is set to nowrap by setting this to wrap the text content will be forced onto the next line when it runs out of space.

#wrap {
  width: 990px;
}
#content-wrap {
  display: flex;
  flex-wrap: wrap;
}
.image-header {
  display: block;
  width: 100%;
}
.image-header img {
  width: 100%;
  height: auto;
}
.container {
  position: relative;
  width: 960px;
  margin: 0 auto;
  padding: 0;
}
<div id="wrap">
  <div id="content-wrap" class="fluid clearfix" data-content="content">
    <!-- /#start content-wrap -->
    <div class="image-header">
      <img src="https://staging.orsgroup.com.au/eapportal/wp-content/uploads/sites/2/2016/07/ORS-Internals-960x211-EmployServOccu21.jpg" alt="Home Page" title="Home Page">
    </div>
    <div class="clear"></div>
    <div class="container">
      <div id="content" class="sixteen columns">
        <section class="post-9 page type-page status-publish hentry">

          <h1>Home Page</h1>

          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis tortor vel diam volutpat luctus. Proin placerat nisl nulla, in mattis ex consectetur quis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec vitae enim
            vel nibh hendrerit dignissim a et ante. Mauris eget tempus nunc. Donec dignissim elit sed ullamcorper semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis, risus eu varius lacinia, diam tortor volutpat ipsum,
            eu luctus neque massa quis leo. Phasellus blandit pellentesque justo non ornare. Cras et elit sit amet quam consequat viverra vel a diam. Pellentesque rutrum, dolor sit amet condimentum dapibus, lorem est dapibus orci, a congue ante ante ac
            lectus. Donec maximus pretium venenatis. Cras ex leo, pellentesque in libero sit amet, auctor congue sapien. Aliquam nec mi commodo ipsum sagittis tincidunt. Vestibulum sollicitudin laoreet eros vel finibus. Integer accumsan consectetur neque
            eget sodales.</p>
        </section>
        <!-- #post-## -->
        <!-- You can start editing here. -->
      </div>
      <!-- /#content-wrap -->
      <div class="clear"></div>
    </div>
  </div>
</div>

Change the flex direction

By default flex-direction is set to row by setting this to column the content will be flexed top to bottom instead of left to right.

#wrap {
  width: 990px;
}
#content-wrap {
  display: flex;
  flex-direction: column;
}
.image-header {
  display: block;
  width: 100%;
}
.image-header img {
  width: 100%;
  height: auto;
}
.container {
  position: relative;
  width: 960px;
  margin: 0 auto;
  padding: 0;
}
<div id="wrap">
  <div id="content-wrap" class="fluid clearfix" data-content="content">
    <!-- /#start content-wrap -->
    <div class="image-header">
      <img src="https://staging.orsgroup.com.au/eapportal/wp-content/uploads/sites/2/2016/07/ORS-Internals-960x211-EmployServOccu21.jpg" alt="Home Page" title="Home Page">
    </div>
    <div class="clear"></div>
    <div class="container">
      <div id="content" class="sixteen columns">
        <section class="post-9 page type-page status-publish hentry">

          <h1>Home Page</h1>

          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis tortor vel diam volutpat luctus. Proin placerat nisl nulla, in mattis ex consectetur quis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec vitae enim
            vel nibh hendrerit dignissim a et ante. Mauris eget tempus nunc. Donec dignissim elit sed ullamcorper semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis, risus eu varius lacinia, diam tortor volutpat ipsum,
            eu luctus neque massa quis leo. Phasellus blandit pellentesque justo non ornare. Cras et elit sit amet quam consequat viverra vel a diam. Pellentesque rutrum, dolor sit amet condimentum dapibus, lorem est dapibus orci, a congue ante ante ac
            lectus. Donec maximus pretium venenatis. Cras ex leo, pellentesque in libero sit amet, auctor congue sapien. Aliquam nec mi commodo ipsum sagittis tincidunt. Vestibulum sollicitudin laoreet eros vel finibus. Integer accumsan consectetur neque
            eget sodales.</p>
        </section>
        <!-- #post-## -->
        <!-- You can start editing here. -->
      </div>
      <!-- /#content-wrap -->
      <div class="clear"></div>
    </div>
  </div>
</div>

Comments