Layout is working on laptop/computer but not on tablet

HTML & CSS
1

I use the following css for a two column layout:

html, body {
  height: 100%;    
}

body:before {
  content:"";
  height:100%;
  float:left;
  width:0;
  margin-top:-32767px;
}

body {
  line-height: 1.3;
  background: #000;
  font-family: Arial, Helvetica, sans-serif;
  color: #FFF;    
}
#wrapper {
  width: 65%;
  min-height: 100%;
  margin: 0 auto -48px; 
  position: relative;
  z-index: 1;    
}

#wrapper:after{
  content: '';
  height:1%;
  display:block;
  clear:both;
  overflow:hidden;    
}

#footer {
  width: 65%;
  height: 48px;
  margin-left: auto;
  margin-right: auto;
  z-index: 2;
  position: relative;    
}
.push {
    height: 48px;
}
#main  {
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 3;    
}
#main #sidebar,
#main #content  {
  overflow: hidden;    
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; 
  background-color:rgba(0,0,0,0.9);
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
}

#main #sidebar {
  width: 30%;
  padding: 32px 16px;
  float: left;    
}

#main #content {
  margin-left: 32%;
  padding: 32px;    
}

The problem I have is with div#sidebar and div#content. On the laptop/computer div#content fills the remaining space of div#main where on the tablet it is sticked to the sidebar.

You can see the page here

Any help would be highly appreciated.

2

To be expected with your float layout.

I’d recommend changing your structure some; Put display:table; on #main, and on #sidebar/content make them display:table-cell;. From there, you should just need to set a few px of border-spacing on #main.

3

Hi Ryan, thank you for the responce I have don that, but now I have another issue,

The combined width from div#sidebar and div#content is now smaller than the width of header and footer, how can I solve that?

4

Perhaps Paul can offer a better solution, but I’m having difficulty.

Perhaps set 0.5em border-spacing on #main, and then on #sidebar set position:relative; and left:-0.5em, and then on Content set position:relative; and right:-0.5em.

I’m unable to get a better solution at this moment. Sorry. I’m probably missing something obvious.

5

Hi Ryan. I have tried that but without the desired result. I indeed hope that maybe Paul O’B have some kind of a sollution. Anyway thank you for helping me in the right direction :smile:

6

I still didn’t find a way to solve this last problem with border-spacing: 1em; border-collapse:separate;

Below is an example of what I mean

900×459 143 KB

What I need is a way to align the sidebar div with the rest of the content left and the content div to align with the rest of the content right.

Any advise or help would be highly appreciated

7

Yes, this is a common issue when using border-spacing to make space between cells.

The fix is simple but does mean adding another div into the mix.

You need to add a div around the one that has been set to display:table and just make it wider using negative margins by the amount of border-spacing you have added.

e…g.

.table-wrapper {margin:0 -1em}

That’s the simplest solution :slight_smile:

8

Hi Paul. So effective and yet so simple! Thanks a lot Paul :slight_smile:

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.