Responsive layout code order

HTML & CSS
1

Responsive layout code order.

Hi all

I’m trying to create a simple layout like so

http://www.ttmt.org.uk/forum/col-1.html

It’s fixed width left column and fluid right column

When the window is resized i would like the left col to drop below the right col - In this example it doesn’t

I know this is because the code order.

If I put the left col below the right col when the window resizes it drops below as I would like.

http://www.ttmt.org.uk/forum/col-2.html

My problem now Is how do I make the right col stretch so it fills the space.

Negative Margins

I know I can do this with negative margins like so

http://www.ttmt.org.uk/forum/col-3.html

Is the negative margin the only way - it would add a ton of div’s to my code

2

Display:table-cell responsive layout

Hi all

I’m trying to create a responsive layout with a fixed width side column on the left and a fluid content column on the right.

When the window resizes I need the side column to drop below the content.

I’m trying to use display:table-cell to create the columns

http://www.ttmt.org.uk/forum/table-cel.html

This creates the columns but to get the side bar on the left the code for the side bar has to come before the content column

This means when the window resizes the sidebar goes above the content column.

Is there anyway to use display:table-cell so the sidebar is on the left but still falls below the content when the window is resized.


<!DOCTYPE html>
<html>
  <meta charset="UTF-8">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="robots" content="">
  <title>Title of the document</title>



  <style type="text/css">

    *{
      margin:0;
      padding:0;
    }
    html, body{
      background:#eee;
      height:100%;
    }
    #wrapper{
      min-height:100%;
      max-width:800px;
      margin:0 auto;
      background:#fff;
      border-left:20px solid #eee;
      border-right:20px solid #eee;
      overflow:auto;
      position:relative;
    }

    #sidebar{
      background:yellow;
      width:200px;
      display:table-cell;

    }
    #content{
      background:red;
      display:table-cell;
    }

    @media only screen and (max-width:500px){

      #sidebar{
        display:block;
      }
      #content{
        display:block;
      }
    }
  </style>

  </head>

<body>

  <div id="wrapper">

     <div id="sidebar">
         <h1>Sidebar</h1>
      </div>

    <div id="content">
      <h1>Content</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>




  </div><!-- #wrappper -->



</body>

</html>
3

I’m sorry, I can’t make it work using table-cells.

Try this… see if it does what you need…


<!DOCTYPE html>
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?1001764-Display-table-cell-responsive-layout
Thread: Display:table-cell responsive layout
2013.03.14 18:27
RachelR
-->
<head>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="robots" content="">
    <title>Title of the document</title>
    <style type="text/css">
* {
    margin:0;
    padding:0;
}
html, body {
    background:#eee;
}
#wrapper {
    outline:1px solid magenta;
    max-width:800px;
    border-left:20px solid #eee;
    border-right:20px solid #eee;
    position:relative;
    margin:0 auto;
}
#sidebar {
    background:yellow;
    width:200px;
    position:absolute;
    top:0;
}
#content {
    background:red;
    margin-left:200px;
}
@media only screen and (max-width:500px) {
    #sidebar {
        position:static;
    }
    #content {
        margin-left:0;
    }
}
    </style>
</head>
<body>
<div id="wrapper">
    <div id="content">
        <h1>Content</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="sidebar">
        <h1>Sidebar</h1>
    </div>
</div>
</body>
</html>

The flaw is that the content must be taller than the sidebar.

4

Perhaps this is what you are after?


<!DOCTYPE html>
<html>
  <meta charset="UTF-8">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="robots" content="">
  <title>Title of the document</title>
  
  
  
  <style type="text/css">
  
    *{
      margin:0;
      padding:0;
    }
    html, body{
      background:#eee;
      height:100%;
    }
    #wrapper{
      max-width:600px;
      padding-left:200px;
      min-height:100%;
      margin:0 auto;
      background:#fff;
      border-left:20px solid #eee;
      border-right:20px solid #eee;
     }
    #wrapper .inner{border-left:200px solid yellow; display: inline-block; background: red; min-width: 100%; margin-left:-200px}
    #sidebar{
      width:200px;
      margin-left:-200px;
      float:left; 
      background: yellow;
      
    }
    #content{
      float:right;background: red;
     }
    
    @media only screen and (max-width:500px){
   	   #wrapper {padding: 0}
       #sidebar, #content{ 
      	float:none;
      	margin:0;
      	width:auto;
      }  
      #wrapper .inner{
        display:block; border: none; min-width: auto; margin: 0; padding:0; 
      }
    }
  </style>
  
  </head>
  
<body>
  
  <div id="wrapper"><div class="inner">
    <div id="content">
      <h2>Content</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
     <div id="sidebar">
         <h2>Sidebar</h2>
     </div>
    
  </div></div><!-- #wrappper -->

  
  
</body>

</html>
5

ronpat, dresden_phoenix thanks that’s what I was looking for. ronpat solution is going to work better for me.

6

[FONT=Verdana]

Well, Rachel didn’t really sound like she wanted to add an extra div (.inner), and none of her examples showed the Sidebar wider than 200px after shifting, so I stayed within those parameters. To minimize dead space, my example is probably “OK” (or so it seems).

HOWEVER, YESSSSS!!! For flexibility, your example is EXACTLY what I started off trying to achieve, but didn’t know how!!! Thus, I have added yet another d_p post to my study schedule :lol:

Cheers! (and thanks!)
[/FONT]

EDIT: pipped by Rachel. :slight_smile:

Thank you for the feedback, Rachel. We have fun doing this.

7

ronpat, can you recommend any good tutorials / learning resources regarding css layout and page structure.

The only problems I ever have with CSS are structuring and the framework of pages. Once I have the structure I never have problems

8

That’s a pretty headdy question to ask the likes of me.

The short answer is, “no”… but I hope you will read the rest of this note, anyay. :slight_smile:

You can tell from my example post that I practice indenting as a tool for visualizing the structure of an HTML page. It enables one to easily and quickly tell how containers are stacked and whether or not all tags are properly matched. Missing or mismatched tags can be page breakers.

For newbies, I would not recommend the HTML5 doctype because its validator does not flag many common structural flaws. Like any new technology, it’s experiencing some growing pains, too. There is plenty of time to experiment with HTML5 and learn it well before it becomes sufficiently supported to be considered a “standard”. In the meanwhile, HTML 4.01 Strict and XHTML1 Strict are the most stable and widely accepted doctypes in use at this time.

Personally, I code with HTML 4.01 or XHTML so I can take advantage of the validator.

CSS resources are everywhere. So much emphasis is being placed on CSS these days that it’s easy to forget that good, sound HTML is required for great CSS to perform as intended.

I can’t really recommend any “best” tutorials or books. I’ve read a few and taken things from all of them. None teaches everything but most teach more than enough to give you a great start. For advanced learning, hanging out here at SitePoint has been the greatest experience of all. I see more variety here than I would have ever seen otherwise.

The fact that you’re concerned about structure is a big plus. So very many people underestimate the importance of good, basic structure to the stability of their code across the growing range of user agents (UA’s) in use today.

Best wishes,
Ron