CODEWITHSUNDEEP
htmlcss
susanloek
susanloek

Reputation: 411

Use available width with css

I've a special case. I want a div use the available width.

This is my code:

.parent {
  width: 100%;
}
.child-left {
  width: 66%;
  float: left;
}
.child-right {
  width: 33%;
  min-width: 400px;
  float: right;
}
<div class="parent">
  <div class="child-left">
    Lorem Ipsum
  </div>
  <div class="child-right">
    Lorem Ipsum
  </div>
</div>

The child-right element should be minimum 400px width. If i resize the screen the element breaks down. Is there a way, that the child-left element use the available horizontal space? Maybe CSS-Flexbox?

Upvotes: 2

Views: 6165

Answers (4)

Simon Backx
Simon Backx

Reputation: 1372

You can use this trick for cross browser compability, without Flexbox:

.child-left {
    width: auto;
    overflow: none;
}
.child-right {
    width: 33%;
    min-width: 400px;
    float: right;
}

Please note that you have to place your right child first in HTML. The float: right; in .child-right makes the div float only with the following element(s). If you place it after .child-left, it won't float next to it.

<div class="parent">
      <div class="child-right">
        Lorem Ipsum
    </div>
    <div class="child-left">
        Lorem Ipsum
    </div>
</div>

See this in action: https://jsfiddle.net/4s3oecrp/

Also, you should remove your css style for the .parent class. 100% width is useless on elements that have display: block; set (default on p, div, section, article, ...), they stretch to their full width automatically.

Upvotes: 0

kukkuz
kukkuz

Reputation: 42370

Because you want to use the available free-space for child-left and not allow the child-right to wrap to a new line, using a flexbox is ideal here:

  1. Remove the floats and add display: flex to the parent.

  2. Add flex: 1 to child-left for it to adjust the free-space automatically.

  3. Set min-width of child-right using flex: 0 1 400px which means the element will only shrink with a flex-basis of 400px.

.parent {
  width: 100%;
  display: flex;
}
.child-left {
  flex: 1;
}
.child-right {
  flex: 1 0 400px;
}
<div class="parent">
  <div class="child-left">
    Lorem Ipsum
  </div>
  <div class="child-right">
    Lorem Ipsum
  </div>
</div>

Let me know your feedback on this.Thanks!

Upvotes: 2

Ramananda Panda
Ramananda Panda

Reputation: 46

you can user flex. just add flex to the parent div

.parent {
  width: 100%;
  display:flex;
}
.child-left {
  width: 66%;
  float: left;
}
.child-right {
  width: 33%;
  min-width: 400px;
  float: right;
}

<div class="parent">
  <div class="child-left">
    Lorem Ipsum
  </div>
  <div class="child-right">
    Lorem Ipsum
  </div>
</div>

for Better learning for http://www.w3schools.com/cssref/css3_pr_flex.asp

Upvotes: 0

Robbin van der Jagt
Robbin van der Jagt

Reputation: 794

I think you can do it with flex yes.

.parent{
  display:flex;
  justify-content: space-between;
}
.child-right{
  flex-basis: 400px;
}

Upvotes: 3

Related Questions