Two Divs Side by Side, One 100% Width Others Width Depended on Content

two divs side by side, one 100% width others width depended on content

See: http://jsfiddle.net/kGpdM/

#left {
    background: #aaa;
    float: left
}
#right {
    background: cyan;
    overflow: hidden
}

This works in all modern browsers and IE7+.

The left column will be exactly as wide as the content inside it. The right column will take the remaining space.

The overflow: hidden "trick" behind this answer is explained here.

Two divs side by side, one centered, the other's height dependent on the first

You would need to but the 2nd div inside the first and positionin it absolutely

JSfiddle Demo

HTML

<div class="main">
    <div class="sidebar"></div>
</div>

CSS

.main {
    width:50%;
    margin:0 auto;
    background-color: lightblue;
    position: relative;
    height:250px;
}

.sidebar {
    position: relative;
    width: 100px;
    top:0;
    left:100%;
    height:100%;
    background-color: lightgreen;
}

Two divs side by side, the right one's width decided by its content, the left one takes up all available space?

You can accomplish this using flexbox.

If you assign display: flex; to your .owner-address class, and then give your .owner-info-container a flex-grow: 1;, it will take up the remaining space within the .owner-address.

CSS

.owner-address {
  display: flex;
}

.owner-info-container {
  flex-grow: 1;
}

JSFiddle

Two divs side by side - Fluid display

Using this CSS for my current site. It works perfect!

#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
} 

How to place div side by side

There are many ways to do what you're asking for:

1. Using CSS float property:

 <div style="width: 100%; overflow: hidden;">
     <div style="width: 600px; float: left;"> Left </div>
     <div style="margin-left: 620px;"> Right </div>
</div>

two divs the same line, one dynamic width, one fixed

I'd go with @sandeep's display: table-cell answer if you don't care about IE7.

Otherwise, here's an alternative, with one downside: the "right" div has to come first in the HTML.

See: http://jsfiddle.net/thirtydot/qLTMf/

and exactly the same, but with the "right div" removed: http://jsfiddle.net/thirtydot/qLTMf/1/

#parent {
    overflow: hidden;
    border: 1px solid red
}
.right {
    float: right;
    width: 100px;
    height: 100px;
    background: #888;
}
.left {
    overflow: hidden;
    height: 100px;
    background: #ccc
}
<div id="parent">
    <div class="right">right</div>
    <div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper porta sem, at ultrices ante interdum at. Donec condimentum euismod consequat. Ut viverra lorem pretium nisi malesuada a vehicula urna aliquet. Proin at ante nec neque commodo bibendum. Cras bibendum egestas lacus, nec ullamcorper augue varius eget.</div>
</div>

Why do two different divs with 100% total width make one go down and not side by side?

In HTML, by default, everything goes from top to bottom. So in s2-r1, even though you have 2 children elements and they would fit side-by-side, they will go from top to bottom.

There are many ways to make them go from side to side, but the best approach heres is to add display: flex to the s2-r1 class. By the way, you wrote .section2-right img for the image selector where it should be .s2-r1 img.

.s2-r1 {
  background-color: skyblue;
  
  /* that's all you need */
  display: flex;
}

.r-content {
  width: 65%;
}

.s2-r1 .placeholder {
  width: 35%;
  height: auto;
  margin: 16px 16px;
  color: red;
  background-color: pink;
}

<div class="s2-r1">
  <div class="placeholder">Placeholder for Image</div>
  <div class="r-content">
    <h2>Orientation date</h2>
    <p>Tue 10/11 & Wed 10/12: 8am-3pm</p>
    <a href="3" class="more">Read more</a>
  </div>
</div>

one div with 100% width and two fixed divs in one line

AS others have said 100% is 100% of page width.. but I disagree with user who says it can't be done with 'plain' CSS

<div style="float: left; width: 200px; background: #223355">a</div>
<div style="float: left; width: 300px; background: #223344">b</div>
<div style="overflow: hidden; background: #334455">c</div>

Two divs, one fixed width, the other, the rest

See: http://jsfiddle.net/SpSjL/ (adjust the browser's width)

HTML:

<div class="right"></div>
<div class="left"></div>

CSS:

.left {
    overflow: hidden;
    min-height: 50px;
    border: 2px dashed #f0f;
}

.right {
    float: right;
    width: 250px;
    min-height: 50px;
    margin-left: 10px;
    border: 2px dashed #00f;
}

---

You can also do it with display: table, which is usually a better approach: How can I put an input element on the same line as its label?

---

Related Topics