Solved

How can control floating in responsive design?

Posted on 2016-08-03
3
46 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 52

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 52

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Using custom html tags with differnt name but exact styling as existing ones 5 55
CSS help matching specific span class 2 40
Problem to page 4 74
Change javascript css 1 19
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 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 position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

910 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

23 Experts available now in Live!

Get 1:1 Help Now