I'm trying to create a fixed side bar with a responsive content div which has to be 732px width plus 20px margin left and right. To achieve this i've used position-fixed for both the side bar and nav-top bar. Then applied margin-left so that the content div starts after the side bar.
I'm struggling with the responsive part. I've kept the 248px margin-left in the media query section so that the content div still starts after the side-bar. I'm having difficulty working out px to %. I applied 100% to the content div, that then forces the content to go outside the wrapper by the width of the side-bar (228px + 20px gap). So I took away the width of the side-bar 248px from the 100% which has left me with a large gap of the right. I've added another 20px on the right so that there's an equal 20px left and right of the content div. However the gap still remains.
I'm not sure if its ok to use both % and px together? Where am i going wrong when calculating the space needed? Thanks in advance.
the html:
<body>
<div id="wrapper">
<div id="navbar-top">
</div>
<div id="navbar-side">
<p>side bar (228px width plus 20px gap)</p>
</div>
<div id="page-wrapper">
<p>content div</p>
</div>
</div>
</body>
the css:
#wrapper {
width:100%;
background-color:#099;
}
#navbar-top {
width:100%;
height:50px;
position:fixed;
top:0;
left:0;
background-color:#333;
}
#navbar-side {
width:228px;
min-height:100%;
background-color:#666;
position:fixed;
top:50px; /*pushes content under navbar-top*/
left:0;
}
#page-wrapper {
height:1000px;
width:732px;
background-color:#CCC;
margin-top:50px;
margin-left:248px;
}
/***********************[start of media queries]***********************************************/
#media screen and (min-width:1000px) { /*desktop queries [ >1000px ]*/
#wrapper {
background-color:#C9C;
}
#page-wrapper {
width:73.2%;
}
}
#media screen and (max-width:1000px) { /*mobile queries [ < 1000px ]*/
#page-wrapper {
max-width:732px;
}
}
It is not necessary to give the content element an explicit width.
All you need to do is to give it a top and left margin, to not be covered by your fixed elements. It is the default behaviour of block-level elements to take all horizontal space!
Generally it is a bad idea to work with absolute units like 'px', especially when it comes to responsive layouts. And also setting heights often causes "unwanted results".
But to demonstrate that it is possible, I have set up a DEMO.
width: 100%;
This is not needed for block-level elements like div!
The demo has a real gap of 20px. If you want the elements next to each other (because of the background-color/ -image), then simply set the margin-left of #content to 228px and use padding-left: 20px;.
That's it ...!
Related
I am trying to build a web site layout with header, content and footer.
Both header and footer should expand to 100% width. And they do. But when I put a very wide element inside content div, header and footer stay at width of my screen and do not expand further to match content width. Please help to achieve such behaviour.
In my example below, I would like blue header and yellow footer to expand and match width of gray content (which in real life will contain a table with unknown width)
jsfiddle: http://jsfiddle.net/StormBlast/z4hegp1o/3/
HTML:
<div id="wrapper">
<div id="header">Header</div>
<div id="content">
<div style="width: 2500px; background-color: gray;">
here comes very wide table with some results and expands beyond screen borders (in width)
here comes very wide table with some results and expands beyond screen borders (in width)
here comes very wide table with some results and expands beyond screen borders (in width)
here comes very wide table with some results and expands beyond screen borders (in width)
here comes very wide table with some results and expands beyond screen borders (in width)
</div>
</div>
<div id="footer">Footer</div>
</div>
CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
padding:10px;
background:#5ee;
}
#content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
background:#ee5;
}
You might want to try using jQuery for this kind of size-matching.
With jQuery you simply grab the width of the content div, and change both the header and footer widths just when the page is loaded.
$('#header,#footer').width($('#content div').width());
http://jsfiddle.net/z4hegp1o/4/
Here's my html and css code :
<div id="navigation_header">
.....<br>
.....<br>
.....<br>
</div>
<div id="main_page">
**********
</div>
#navigation_header {
float:left;
}
#main_page {
float:left;
}
As you can see ,the main_page is right to the navigation bar.
However when I resize the browser window , as the width goes smaller , the main_page will appear at the bottom of navigation bar.
How can I make the main page fixed right to navigation bar as I change the window size.
PS: I created a fiddle for this, check it http://jsfiddle.net/E83dH/
For what you want you should wrap both elements with a DIV and style with a min-width:
.wrap { width:100%; min-width:300px;} // * min-width should be the combined width of both elements.
http://jsfiddle.net/T87q5/
check out the demo
Rather than float your #main_page, give it an overflow property. It will take up all of and only the available width.
#main_page {
overflow:hidden;
}
JSFiddle
You have to provide % width if you want to change the size of div too according to the screen width.
Here is the css
#navigation_header {
float:left;
width:30%;
}
#main_page {
float:left;
width:70%;
}
You can check it here [jsfiddle]http://jsfiddle.net/E83dH/1/
What I would suggest you do instead is put both things inside a container and give the container a min width. Infact give all your div's a min-width
http://jsfiddle.net/E83dH/3/
HTML
<div class='container'>
<div id="navigation_header">.....
<br>.....
<br>.....
<br>
</div>
<div id="main_page">**********</div>
</div>
CSS
#navigation_header {
float:left;
}
#main_page {
float:left;
}
.container {
min-width:300px;
}
This will ensure that you get a scrollbar at the bottom but the second div doesn't come below. Note that the min-width should be the sum width of the two elements at the point when the second element comes below the first.
I want to recreate the following header:
The problem is that the content is centered in the white section. Grey is the background of body and the header is 100% of screen.
What I have now is:
CSS
.top_left {
background:#3c4d74;
}
.top_right {
background:#2f3a5a;
}
.top_center {
background:#3c4d74 url(http://img85.imageshack.us/img85/2816/headerbgo.jpg) no-repeat right top;
height:140px;
}
#page,
.top_center {
max-width:1000px;
margin:0 auto;
}
#page {
background:#FFF;
}
body {
background:#DEDEDE;
}
HTML
<body>
<div id="top-header">
<div class="top_left"></div>
<div class="top_center">
LOGO
</div>
<div class="top_right"></div>
</div>
<div id="page" class="hfeed">
MY content bla bla bla
</div>
</body>
Which you can see working on http://jsfiddle.net/gTnxX/ (I put max width 600px instead of 1000px so you can see it on fiddle).
How can I make the left side soft blue and right side hard blue at any resolution?
To do this you need to be very aware of how positioning works.
The #header-bg is positioned so it falls below #wrapper. It is 100% width, 140px high with 2 divs which both take up 50% of that space and they both get a different colour for left/right.
The #wrapper is relatively positioned to make z-index work, putting it above the #header-bg. Width is set at 600px, and margin: 0 auto; centers it.
The #header is a simple div which has a height set to it and the background it requires.
Content follows the #header in normal flow.
Here is a jsfiddle with the requested behaviour.
http://jsfiddle.net/sg3s/cRZxN/
This even degrades nicely and lets you scroll horizontally if the content is larger than the screen (something I noticed from the original jsfiddle).
Edit:
To make it IE7 compatible I made some changes to fix 2 bugs. I had to add left: 0; and top: 0; explicitly to #header-bg to fix a positioning bug. Made the divs inside #header-bg 49% instead of 50% or else IE7 would not resize them properly and make the right div bump down. To compensate for the small gap that created I made the right div float: right;.
I have this problem after coding my index page. I have divided the page into 2 columns:
header
nav
content floating left, content floating right
footer
On my screen resolution I have it properly aligned:
Content left | Content right
But on a small screen, it looks like this:
Content left
Content right
This is the code:
<div id="contentleft">
text & content left
</div>
<div id="contentright">
text & content right
</div>
CSS:
#contentleft {
float:left;
margin-left:12%;}
#contentright {
float:right;
margin-right:12%;}
Help would be great appriciated
floats will wrap when there does not exist enough space for them. your css has the width set to auto expand to the content.
#contentleft {
float:left;
margin-left:12%;
width:38%; // note margins grow the width of divides
}
#contentright {
float:right;
margin-right:12%;
width:37%; // note on odd width screen some browsers IE rounds up so 100%/2 + 100%/2 = 101% according to microsoft.
}
One way to prevent the overlap is to place both divs in a #wrapper div and give the #wrapper a set width.
#wrapper{
width:400px;
}
#contentleft {
float:left;
width:120px;
margin-left:12%;
background:green;
}
#contentright {
float:left;
width:120px;
margin-left:12%;
background:red;
}
Example: http://jsfiddle.net/jasongennaro/b2eyx/1/
Fyi... I also floated them both left and changed the margins and added some color to make it easier to see.
And welcome to SO!
add width to your Divs and put it in % like 50%-50%.
I got headache how to make my fluid content will float to right.
left sidebar is fixed size.
right content is fluid size.
Here and example my html and css
How to make my id="content" will float on right?
Set a margin and remove the float/width on #content, like so:
HTML:
<div id="wrapper">
<div id="sidebar">Sidebar</div>
<div id="content">Content</div>
</div>
CSS:
#wrapper {
width:400px;
overflow:hidden;
padding:10px;
}
#sidebar {
float:left;
width:100px;
}
#content {
margin: 0 0 0 100px;
}
div {
border:1px solid #333;
}
http://jsfiddle.net/HWMJc/1/
There is actually an even easier solution to this which i discovered not too long ago. Works well back to IE7. The #fluid div will slide up next to the fixed fix and take up the remaining space while maintaining great fluidity for all responsive sites. Dont need put a float or width on the fluid div at all.
http://jsfiddle.net/HWMJc/874/
#sidebar {
float:left;
width:100px;
}
#content {
overflow:hidden;
}
You should set it to be:
sidebar{ width:100px; float: left}
Don't use 100% width on #content.
70% works, but there is a small gap between the two elements. You can adjust it to make it fit better though.