Menu
How can I make the divs side by side and one of the div ('contentwrapper') be responsive to the browser resizing.
HMTL
<div id="maincontainer"> <div id="leftcolumn"> </div> <div id="contentwrapper"> </div> </div> CSS
#maincontainer { width:100%; height: 100%; } #leftcolumn { display:inline-block; width: 100px; height: 100%; background: blue; } #contentwrapper { display:inline-block; width:100%; height: 100%; background-color: red; } JSFIDDLE http://jsfiddle.net/A5HM7/
564
To position the divs side by side, we are using the float property to float each . float-child element to the left. Since they are both floating to the left, they will display side by side if there's enough space for both to fit.
By default, if we have multiple div tags it will be displayed one below the other. In othere words, each div will be displayed in a separate line. To display multiple div tags in the same line, we can use the float property in CSS styles. The float property takes left, right,none(default value) and inherit as values.
Users can see that all div elements inside the parent div are displaying inline. Approach 2: In this approach, we will apply display: inline-block property to all the div which we need to display inline. The display:inline-block property will set the all div elements side by side.
To align two <div> elements vertically in Bootstrap 3, you can try using the CSS Flexible Box Layout. In the example below, we display the needed row as a flex container box with the CSS display property and then, align the flex-items (columns) vertically with the align-items property.
<style> #maincontainer { width:100%; height: 100%; } #leftcolumn { float:left; display:inline-block; width: 100px; height: 100%; background: blue; } #contentwrapper { float:left; display:inline-block; width: -moz-calc(100% - 100px); width: -webkit-calc(100% - 100px); width: calc(100% - 100px); height: 100%; background-color: red; } </style> 
169
Ok, so I think this will be the quickest fix for you. You already have a great html structure but I am going to narrow it down more for you. Here is the JsFiddle.
With your code:
#maincontainer { width:100%; height: 100%; } I have made a minor adjustment like so:
#maincontainer { width:100%; height: 100%; display:inline-block;//added this } and then I also restructured two other things like so:
#leftcolumn { float:left;//added this width: 100px; height:100%; background: blue; } #contentwrapper { float:right;//added this width:100%; height: 100%; background-color: red; } Now in this JsFiddle, I have appropriately created a specific width, so you can always change that. Please keep in mind that if you use 100% as a width, and try to stick something else in that same line, it will automatically create two lines such like so:
#leftcolumn { display:inline-block;<-- changed this above. width: 100px;<----This won't work with the below height: 100%; background: blue; } #contentwrapper { display:inline-block;<---- changed this above. width:100%;<---- This won't work with the above height: 100%; background-color: red; } But if you restructure that to be more like this:
#leftcolumn { display:inline-block; width: 10%;<---This will work with the below height: 100%; background: blue; } #contentwrapper { display:inline-block; width:90%;<---This will work with the above. height: 100%; background-color: red; } A few things to note, I did add in a height with the JsFiddle so that I could see the actual dimensions and I also added in width for the exact reason. Something to note that can really help out with implementations and the basic "why does this work" is this.
Comment below if something doesn't work for you :)
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
