Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

How can control floating in responsive design?

Posted on 2016-08-03
3
Medium Priority
?
63 Views
Last Modified: 2016-08-03
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
Comment
Question by:MOSTAGHASSI
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 58

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 41740357
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
 

Author Comment

by:MOSTAGHASSI
ID: 41740920
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
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41741025
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

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question