CODEWITHSUNDEEP
csshtml
R.Spark
R.Spark

Reputation: 965

float the div when reducing the windows screen size

I am having problem of floating the div when reducing the windows screen size. What I would like to achieve is I have two div side by side, both div are floating left. When I reduce the browser windows screen size, and the right div will move to the bottom of the left div. Please see the screenshots below: Normal look when two divs fit in the browser window

After reduce the browser window size, and the right div will move at the bottom of left div

At first, two divs are displayed side by side. After reduce the Browser windows size, the right div content will move to the bottom of the left div.

Upvotes: 0

Views: 5464

Answers (2)

S.Visser
S.Visser

Reputation: 4725

You need to work with a container.

example

html

<div id="container">
  <div class="left"> Hello </div>
  <div class="right"> World </div>
</div>

css

#container {
  width: 100%;
  margin: 0 auto;
}

#container .left {
  width: 200px;
  background-color: pink;
  float: left;
}

#container .right {
  width: 760px;
  background-color: blue;
  float: left;
}

See live: http://jsfiddle.net/s8wfx/

Upvotes: 1

CyberDude
CyberDude

Reputation: 8979

Use a parent div, and fix the size of the children: http://jsfiddle.net/zV9ea/

Upvotes: 4

Related Questions