Geek Answers Handbook

Can two DIVs be aligned side by side if they are fixed?

I am trying to set up a design where I need a left bar for navigation and everything that remains stationary and doesn't scroll, but next to it there is a content field that scrolls as needed. The problem I am facing if I position: fixed; the first DIV, it technically does what I want, but it overlaps the second DIV. I just create this and use JsFiddle to easily test, so I have no actual working code except this fiddle. I admit that I wake up for about 30 hours, so if this is really a stupid distrust of me, please forgive me. Thanks!

Fiddle

+5
source share
9 answers

I tried to write this code, and it is also responsive.

 * { padding: 0px; margin: 0px; } #one { float: left; position: fixed; width: 25%; background: #666; height: 100%; } #two { box-sizing: border-box; padding: 20px; position: absolute; left: 25%; right: 0%; float: right; width: 75%; background: #333; }

Hope this helps.

+2
source

When you add position:fixed , the element is extracted from the stream and its main functions relative to the window.

so the following CSS:

 #one { float: left; position: fixed; width: 25%; background: #666; height: 100%; }

25% is 25% of the window, not 25% of <div id="wrap"> (and therefore the overlap), if you remove position:fixed , you will not see the overlap.

with a fixed position, you probably want to have a left offset of <div id="two"> , you are experimenting with:

 margin-left: // DO YOUR MATH. padding-left: // DO YOUR MATH.
+1
source

You already have height: 400px; on your div , so point the height to #one too http://jsfiddle.net/ypL8ypsf/5/

 #one { position:fixed; width:16%; background: #666; height:384px; }

Hope this helps

+1
source

This change in css will solve your problem

 #wrap { background: #999; width: 500px; height: 400px; border: 1px solid black; padding: 5px; overflow: scroll; } #one { position: fixed; width: 25%; background: #666; height: 100%; display:inline-block; } #two { width: 70%; background: #333; height: 100%; display:inline-block; overflow:hidden; margin-left:29%; } .clear { clear: both; }
+1
source

If you have a position: fixed on the element. it can only be controlled by the browser window, it cannot be controlled by the parent div. so if you add a width: 25% will fill 25% of your browser window. not in the parent div.

i has 2 solutions,

  • use javascript. dynamically add width to 'px' and add position: fixed after
  • usage position: absolute. instead of fixed. (In fact, your growth is 100%, so it does not matter, your position is corrected.)

1st solution: javascript approach [code sample] :

 //remove position:fixed from #one #one { float: left; width: 25%; background: #666; height: 100%; } <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> <script type="text/javascript"> var calWidth = $("#one").width(); //get the width $("#one").css({width:calWidth+'px',position:'fixed'}); //apply to the div </script>

2nd solution: CSS approach [sample code]

 #wrap{ position:relative; } #one{ position:absolute; }
+1
source

Try overriding existing float and position styles with

float: left; and
position: relative;

0
source

Instead of fixing this DIV, I put both of them to the left and gave the second DIV scroll property overflow-y.

Hope this helps you:

 #wrap { background: #999; width: 500px; height: 400px; border: 1px solid black; padding: 5px; } #one { float: left; width: 25%; background: #666; height: 100%; overflow:hidden; } #two { float: left; width: 75%; background: #333; height: 100%; overflow-y: scroll; } .clear { clear: both; }

If this is not useful, you can always try some frameworks with default sidebars.

0
source

Although you can add some margin to the second div to shift it to the right, I don't think you should use a fix for this. You must do this:

 <div class="div1">This is not moving</div> <div class="div2"> Loren ipsum...</div> html, body{ height: 100%; padding: 0; margin: 0; } .div1{ background: #DDD; width:40%; height: 100%; float: left; overflow: hidden; } .div2{ background: #EEE; width:60%; height: 100%; float: left; overflow-y:auto; }

Here's a pen for you: http://codepen.io/vandervals/pen/bdBWJV

0
source

I managed to do what you want, but adding more div. HTML will be

 <div id="wrap"> <div id="testone"><div id="one"></div></div> <div id="test"><div id="two">Lorem ipsum... </div></div> <div class="clear"></div>

and css then

 #wrap { background: #999; width: 500px; height: 400px; border: 1px solid black; padding: 5px; overflow: scroll; } #testone{ float: left; width: 25%; background: #666; height: 100%; } #one { position: fixed; } #test{ float: right; width: 75%; height: 100%; } #two { background: #333; } .clear { clear: both; }
0
source

More articles:


All Articles