Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

How can control floating in responsive design?

Posted on 2016-08-03
3
Medium Priority
?
69 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
  • 2
3 Comments
 
LVL 60

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 60

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

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

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

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

963 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