I have a page layout as shown here...
http://jsfiddle.net/k55DE/
What I need is for the left edge of the two pink columns to always line up no matter how wide the screen is. The Sidebar container is always 300px wide,
Thanks for any help
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example</title>
</head>
<body>
<div id="toolbar">
<div id="nav">NAVIGATION</div>
<div id="search">SEARCH</div>
</div>
<div id="site">
<div id="content">CONTENT</div>
<div id="sidebar">SIDEBAR</div>
</div>
</body>
</html>
-
#toolbar {
margin-bottom:10px;
overflow:auto;
}
#toolbar #nav,
#toolbar #search {
float:left;
}
#toolbar #nav {
background-color:#ddffdd;
min-height:30px;
text-align:right;
width:66%;
}
#toolbar #search {
background-color:#ffdddd;
min-height:50px;
width:34%;
}
#site {
margin:0 auto;
overflow:auto;
width:800px;
}
#site #content,
#site #sidebar {
float:left;
min-height:300px;
}
#site #content {
background-color:#ddffdd;
text-align:right;
width:70%;
}
#site #sidebar {
background-color:#ffdddd;
width:30%;
}
The easiest way to solve this is to make sure the right-side of the green areas is always lined up. In theory, this can be done by making the green areas always be the same size. Unfortunately, this is much harder than it would otherwise be because the upper green area has a percentage width (66%) and the lower green area has an explicit width (70% of 800px or ~560px). Oh, and the lower green area is centered.
Because the lower "content" area has been centered (margin-left and margin-right are auto), the margin on the left will be some fixed amount based on the size of the browser window. (Approximately (browser width - 800)/2.) Since this value is dependent on the width of your browser at the time of rendering, you cannot determine this amount in pure CSS and will need to use JavaScript to force these to line up.
The Javascript would need to do the following:
Determine the width of the left margin (browser width - 800px)/2, approximately.
Set the width of the upper green part to be margin width (as calculated in 1) + 800px. Set the upper pink part to fill the rest horizontally.
Add a listener to the window resize action and repeat 1 and 2 above every time the window is resized.
This would all be much simpler if either the bottom part was not centered or if the top part also had the same centering/sizing applied. Then you'd be able to apply a pure CSS solution.
Related
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'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 ...!
So on my screen this works fine on all browsers, but when i try to view my site on laptop or a smaller screen #sidebar and #center move to the left. I assume it has something to do with #sidebar's margin-left but is there any other way to make sidebar and center go under the header and next to each other?
#header {
background-image:url(media/dddd.png);
margin-left:auto;
margin-right:auto;
width:1000px;
height:250px;
position:relative;
}
#sidebar {
height:800px;
width:300px;
background-color:#CCFFFF;
float:left;
margin-left:23.5%;
margin-right:auto;
position:static;
}
#center {
margin-left:auto;
margin-right:auto;
height:800px;
width:700px;
background-color:white;
float:left;
border:1px solid black
}
Since #sidebar has left-margin: 23.5%;, it moves to the left when you reduce the window because it will always be 23.5% of the window width. So if your window is 1000px wide, the #sidebar div's margin-left will be 235px, and this number decreases with the width of the window (making it look like the div is moving to the left).
The #center div moves down because the width of the window is less than the margin-left value + the width of #sidebar + the width of #center. When the window is too narrow, the divs rearrange to fit (like how text in a text box goes to a new line when it runs out of space).
If you want to keep your layout how it is when the window gets smaller, there are two easy things you can do:
Make all of your divs width a percentage: If your #sidebar has margin-left:25%; width:20%; and your #center div has width:50%, both of the divs (and the margin) will resize as the screen shrinks (this is one way Responsive Web Design works). Here is an example on jsFiddle.
Put everything in a container div: Since it sounds you want to have your header, sidebar, and content in one block, you could wrap all of these elements in a container div. You'll have to change your CSS a bit, but a basic implementation would look something like this:
CSS
#container {
width: 1000px;
margin-left:auto;
margin-right:auto;
}
#header {
background-color:red;
width:auto;
height:250px;
}
#sidebar {
height:800px;
width:300px;
background-color:#CCFFFF;
float:left;
}
#center {
height:800px;
width:auto;
background-color:green;
border:1px solid black
float:left;
}
HTML
<div id=#container">
<div id="#header">header content</div>
<div id="#sidebar">sidebar content</div>
<div id="#center">center content</div>
</div>
Here is a jsFiddle with this code.
Since the container div has a set width, you don't have to worry about the widths of the child elements.
so i think you want to get #sidebar and #center beside each other,centered and under #header or?
Would be nice if we can see your html markup but
just give every div position:relative and a float left.
then you give the #sidebar left:50%.
Then add the width of both divs /2 (#sidebar and #center). --> (sidebar.width + center.width) /2
Then you give the result #sidebar with a margin-left and a minus before. --> margin-left: -500px
I think the issue lies with your HTML.
Ensure that your sidebar <aside> and your content <article> are nested within the same <div> or <section>.
The terms I'm using are with HTML5 syntax. If you aren't using HTML5, replace all elements with <div>.
Example:
<header></header>
<div>
<section></section>
<aside></aside>
</div>
If both the <section> & <aside> have a width:% or px; & float:left; you should be fine.
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%.
This is what I'm trying to do:
Example http://img689.imageshack.us/img689/5761/cssautowidth.th.jpg
(Larger image.)
When the <nav> element is present in the design, I want it to look like the example below. Is it possible to do this while the #content div has got a percentage value set? I'm just curious to see whether this is possible without using two different styles for the #content (both with different width values.)
Just floating doesn't seem to do it.
The reason I want the #content to have a percentage value in the first example is because I have a background image in #body that creates the illusion of an outer glow.
Edit: I just removed the need for using the width percentage by using margins instead.
Check the example here: http://css.maxdesign.com.au/floatutorial/tutorial0816.htm
What you should do is to set float:right and width on your <nav> element, and leave #content without any float or width, just set margin. This way content will try to occupy all given space and wont 'fall' into navigation.
Then, if you hide <nav> element, content will automatically resize (but also you will need to remove padding from the right).
This is example code:
<style type="text/css">
#container { width:700px; margin:0 auto; border:1px solid #000; }
#nav { display:none; }
.double #nav { width:10%; float:right; display:block; }
#content { margin-right:10%; border-right:1px solid #000; }
</style>
<div id="container" class="double">
<div id="nav">nav content</div>
<div id="content">page content</div>
</div>
Now, if you removed class="double" from container element you will see content is correctly resized to take 90% of given space. If you want to take 100% - just add .double before #content in style.