Solved

How can control floating in responsive design?

Posted on 2016-08-03
3
40 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 51

Accepted Solution

by:
Julian Hansen earned 500 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 51

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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

706 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now