• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 85
  • Last Modified:

How can control floating in responsive design?

Hello;

I have a main container which has 2 div (left  and right ),and  have added 'media query'  for tablet ,when i resize the browser and it reach to break point  then i see that left div go up to the right div,please let me know that how can i control these div ,i want that left div go down the right div.

HEML:

 <div class="maincontainer">
  <div class="mainleft">
   <div class="row">
  <div class="col-md-12">Column 1 - full width, represents a row</div>
  <div class="col-md-12">Column 2 - full width, represents a row</div>
  <div class="col-md-12">Column 3 - full width, represents a row</div>
</div>
 </div>

  <div class="mainright">
      <div class="basicdiv3rows">
  <div class="row1">art</div>
  <div class="row2-horizontallinemain-artandculture"></div>
  <div class="row3">some content</div>
  </div>
  </div>
  </div>/*end of maincontainer */

Open in new window


CSS

    .maincontainer{
	 height:auto;
	width: 1000px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
	background-color: red;
	overflow: hidden;  
  }
    .mainleft{
	float: left;
	width: 300px;
	height:auto;
	background-color: #D0D1F9;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
	}
	 .mainright{
	float: right;
	width: 700px;
	height:auto;
	background-color: #C4F4D6;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
	}
      @media screen and (max-width: 768px) {
    .mainleft{
	float: none;
	width: 100%;
	height:auto;
	background-color: #D0D1F9;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
	}
	 .mainright{
	float: none;
	width: 100%;
	height:auto;
	background-color: #C4F4D6;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
	}
}

Open in new window

0
MOSTAGHASSI
Asked:
MOSTAGHASSI
  • 2
1 Solution
 
Julian HansenCommented:
The natural stacking order is left is higher than right.

To get around this you can repeat your left div after the right div and then use the hidden styles
Something like this
CSS - add this to your styles
	.showsmall {
		display: none;
	}
	.showlarge { 
		display: hidden;
	}

Open in new window

HTML - note the use of the showlarge and showsmall classes
 <div class="maincontainer">
  <div class="mainleft showlarge">
    <div class="row">
      <div class="col-md-12">Column 1 - full width, represents a row</div>
      <div class="col-md-12">Column 2 - full width, represents a row</div>
      <div class="col-md-12">Column 3 - full width, represents a row</div>
    </div>
  </div>

  <div class="mainright">
    <div class="basicdiv3rows">
      <div class="row1">art</div>
      <div class="row2-horizontallinemain-artandculture"></div>
      <div class="row3">some content</div>
    </div>
  </div>
  
  <div class="mainleft showsmall">
    <div class="row">
      <div class="col-md-12">Column 1 - full width, represents a row</div>
      <div class="col-md-12">Column 2 - full width, represents a row</div>
      <div class="col-md-12">Column 3 - full width, represents a row</div>
    </div>
  </div>
</div>/*end of maincontainer */

Open in new window

Working sample here
0
 
MOSTAGHASSIAuthor Commented:
Thanks,it works,is this a general solution for this problem?Before i hadn't seen this kind of "class" in css,where we can use it and is there any reference?
0
 
Julian HansenCommented:
By class do you mean the showlarge / showsmall?

If so - you won't find references to those - I made them up for this solution.

I am not sure if this is considered a general pattern - it is something I came up with a while back to address a similar problem I was having with responsive site that used a layout of alternating text and image blocks in a two column layout - when this collapsed to a single column layout it was going text image image text instead of text image text image - I used this solution for that. I also used it in a two layer responsive menu - the top layer on large screens needed to move below the bottom layer on smaller screens - solved it in the same way by repeating the top menu top and bottom and simply hiding or showing the one or the other depending on the screen size.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now