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:
CSS
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 */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;
}
}ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
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.
ASKER