0

I have been messing around with trying to get a sidebar to stay fixed to a center div, and I have it mostly working in Firefox and IE, but for some reason it is not working in Chrome. My issue is that when I resize the window the left sidebar no longer extends to the bottom of the page in chrome. All the code is included below, so you can see what I am seeing in your own browsers.

My question is: why is Chrome acting this way and is there a way for me to fix this? My Chrome version is 28.0.1500.95.

Thanks.

HTML:

<html>
<header>
    <link rel="stylesheet" href="test.css"/>
</header>
<body style="margin:0">
    <div>
        <div class="width main table">
            <div class="relative-float-left" style=" width:0px; height: inherit; ">
                <div class="relative-float-left sidebar table">
                    --Some lorem ipsum here--
                    <br style="clear: both; " />
                </div>
            </div>
            <div class="relative-float-left content">
                   --Some lorem ipsum here--
            </div>
            <br style="clear: both; " />
        </div>
    </div>
</body>

CSS:

.relative-float-left {position:relative; float:left;}
.width {width:33%;}
.table {display:table;height:100%;}
.sidebar {width:30px;right:45px;background-color:yellow;}
.content {margin-left: 10px; width: 95%; background-color: orange;}
.main {background-color:blue; width:50%; margin:auto;}

Edit: I want the center div to dynamically size with the sidebar to be fixed. Content inside the sidebar can't be clipped and I want any content that can't fit onto the page to be pushed down and make the page bigger (thus I do not want to use inner scrolling for the content (orange) div. Sorry for the messy code, it was just easier to test out a proof of concept.

I have also rewritten the code to give it a stylesheet for easier readability. I would really like this answered as I have no idea why this is happening. It may have something to do with this answer.

Community
  • 1
  • 1
derigible
  • 964
  • 5
  • 15
  • 32
  • try to use flexible boxes. U wont have to dealwith these sort of problems later. visit https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes – Rahul Aug 23 '13 at 21:35
  • @JoshC this is a layout as described above (left sidebar riding along a centralized div). If you know of another way to do it i would be more than happy to use it. I have edited my question to contain a few more requirements. And Rahul, I will take a look into these flexboxes as they look very promising, but I would still like an answer as to why this doesn't work in Chrome but it does in other browsers and if there is a fix. – derigible Aug 23 '13 at 21:58
  • Not sure why I got a downvote, I am willing to use whatever people can give me. I have made several edits for clarity if that helps. – derigible Aug 23 '13 at 22:46
  • 1
    Question. Does your HTML really have `
    ` instead of ``? That is a structural error which may account for many differences in display between browsers. Also I don't like the `display:table` much; browsers are supposed to handle this by creating an anonymous table row with an anonymous table cell around the content, but I'm not sure they all do that in the same way.
     – Mr Lister Aug 24 '13 at 07:38
  • @MrLister I did indeed have a header tag present that was messing up the html structure. I have since removed it and have edited the html. I have also added a couple of screenshots. – derigible Aug 26 '13 at 14:25

1 Answers1

0

You have <header> in your source instead of <head>. This causes the document to be invalid, not because you can't have a header in that position - the browser automatically inserts a <body> start tag there and then puts the header inside it - but because there is a <link> in it which should be in the head, not in the body. And then there is a <body> start tag while the body is already open, which is disallowed too.

Edit: I see you edited your comment now, so does that mean you no longer believe this is the cause of the problems?

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
  • It was a part of the problem, but it was not the main cause. I am still seeing some issues with the display:table. I want to document it better. Sorry, I was a little hasty with the reply. – derigible Aug 26 '13 at 14:34
  • Nevermind, that was the problem. I discovered I had missed a style on one of my elements. It is now working. Thank you for your help! – derigible Aug 26 '13 at 14:43