0

I am trying to build a mobile-ready design composed of three main blocks, an advertisement block, content block and sidebar block (plus header and footer, but those are not important for this problem).

The idea is for the advertisement and sidebar to have fixed widths (250px) and be aligned to the right side of the container block, and the content to be fluid and on the left side. On mobile, I need to break this design and layer the blocks on top of each other in order ad->content->sidebar width 100% widths

I have something like this in mind:

I have seen solutions that made this work, like this one, but they all work with relative sizes in percent, and not with fixed "sidebar" widths.

Community
  • 1
  • 1
Eldzej
  • 3
  • 3

3 Answers3

1

media queries allow you to say at a certain windows size I want this css to run. So for example:

.ads {
    float: right;
    width: 250px;
    margin-left: 5px;
}
@media screen and (max-width:500px) {
    .ads {
        width: 250px;
        margin: 0 auto;
    }
}

So using this you can control css depending on screen size

Example:

http://jsfiddle.net/link2twenty/kufbbodr/

Change the width of the result box to see how it works

Andrew Bone
  • 7,092
  • 2
  • 18
  • 33
  • I have been trying to use calc(), but for some reason, it doesn't work even in newer versions of IE (11) My code `width: -webkit-calc(100% - 250px); width: -moz-calc(100% - 250px); width: calc(100% - 250px);` – Eldzej Nov 23 '15 at 13:15
  • Does the fiddle I used as an example work in IE11? It does for me. – Andrew Bone Nov 23 '15 at 13:24
  • The fiddle does, so I suppose there was something amiss with my implementation (most likely the fallback static width:100% for browsers without calc(} support). Calc() was the first thing I thought of when approaching this problem, but then I assumed IE was being IE and not supporting it, so I started looking for some alternative, and hit a wall. I guess the few IE8 users that exist can deal with having a suboptimal look of the page... Thanks for the answer – Eldzej Nov 23 '15 at 15:11
  • Well here's a calc free version using JS http://jsfiddle.net/link2twenty/exhnq54f/ just in case – Andrew Bone Nov 23 '15 at 15:39
0

You need to adjust the width for media query in below code to what you are defining as mobile size. I have set it as 480px.

#ads,#content,#sidebar,parent{
 width:100%;
}
#ads{
  background:red;
  width:100%;
  position:relative;
 }
 #content{
  background:green;
  width:100%;
  position:relative;
 }
 #sidebar{
  background:blue;
  width:100%;
  position:relative;
 }
@media screen and (min-width: 480px){
 #ads{
  background:red;
  float:right;
  width:250px;
  position:relative;
 }
 #content{
  background:green;
  float:left;
  width:calc(100% - 250px);
  position:relative;
 }
 #sidebar{
  background:blue;
  float:right;
  width:250px;
  position:relative;
 }
}
<html>
<body>
<div id='parent'>
 <div id='ads'>
  ads
 </div>
 <div id='content'>
  <div>
   content1
  </div>
  <div>
   content2
  </div>
 </div>
 <div id='sidebar'>
 sidebar
 </div>
</div>
</body>
</html>
hardcoder
  • 184
  • 2
  • 14
0

Basic Layout For your problem

<div class="container">
      <div class="ad">
      </div>
      <div class="main">
      </div>
      <div class="bottom_sub">
       </div>
    </div>

<style>
 .container{
 width:100%;
 margin-left:auto;
 margin-right:auto;
 }
.main{
    height:20em;
    width:calc(100% - 250px);
    width:-webkit-calc(100% - 250px);
    width:-moz-calc(100% - 250px);     
    float:left;
    background:red;
}
.ad{
    width:250px;
    float:right;
    background:green;
}
.bottom_sub{
    width:250px;
    float:right;
    background:blue;
}

@media screen and (max-width:467px){
.main{
    width:100%;
    background:red;
}
.ad{
    width:100%;
    background:green;
}
.bottom_sub{
    width:100%;
    background:blue;
}
}
</style>
Shudhansh Shekhar
  • 724
  • 6
  • 14