CODEWITHSUNDEEP
cssresponsive-design
Panagiotis
Panagiotis

Reputation: 1567

Responsive Web Design float position

I am trying to achieve the following in a two column float css design

enter image description here

My css for the two is this:

.div1 {
 width: 25%;
 float:left;
}

.div2 {
 width: 75%;
 float: right;
}

.container {
 width:960px;
}

@media screen and (max-width: 320px) {
 .div1, .div2 {
 width: 100%;
 display: block;
 float: none;
 clear: both;
 }
 .container {
  width: 100%;
 }
}

my html is this:

...
<div class="container">
 <div class="div1">
 ... content inside
 </div>
 <div class="div2">
  <img src="photo_loc"/>
 </div>
</div>

I have Div I and Div II. Div I is 25% width and Div II is 75% width. When I go to 320px (iphone portrait) using responsive design Div II goes below Div I, which I assume is the normal process.

What I am trying to do is have Div II above Div I using floats, how can this be achieved through css?

Upvotes: 0

Views: 2619

Answers (2)

Binita Lama
Binita Lama

Reputation: 1278

Working Fiddle

.div1 {
width: 25%;
float:left;
background:orange;
}

.div2 {
width:75%;
float: right;
background:red;
}

@media screen and (max-width: 320px) {
.div1, .div2 {
width: 100%;
display: block;
float: none;
clear: both;
}
.div1{
position:relative;
top:100px;
}
.div2{
position:absolute;
top:0;
height:100px;
}
}

Upvotes: 2

Stewartside
Stewartside

Reputation: 20905

Swap the HTML positions of div1 and div2 around.

It may not be semantically correct in terms of how the page should be layed out but it will still work.

Keep the CSS the same and have your html like this

<div class="div2">Text for box 2</div>
<div class="div1">Text for box 1</div>

Demo: http://jsfiddle.net/u3Ng3/1/

Upvotes: 0

Related Questions