My site consists of a side menu div and a main content div. I've floated the divs left and used percentages so that the columns fill the entire page. However I'm also using min-widths because I want the side menu to be no smaller than 205px wide and the main content to be no smaller than 780px. The site needs to be no smaller than 985px wide however I still want the content to be flexible enough to fill the screen.
My problem is when I resize the window (less than 985px wide) the main content div moves underneath the side menu. Where am I going wrong?, The div should stay in the same position, next to the side menu, but the horizontal scroll bar should kick in. The content should then fill the screen.
Fiddle
THE HTML:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<div id="wrapper">
<div id="side-bar">
<p>side bar</p>
</div>
<div id="main-content">
<div id="content">
<p>some content</p>
</div>
</div>
</div>
</body>
</html>
THE CSS:
body
{
margin:0;
padding:0;
font-size:100%;
font-family:Arial;
}
p
{
margin:0;
padding:0;
}
#wrapper
{
width:100%;
min-width:985px; /*site no smaller than 985px wide*/
height:auto;
}
#side-bar
{
width:15%;
min-width:205px; /*nav sidebar no smaller than 205px wide*/
min-height:672px;
background-color:Gray;
float:left;
}
#main-content
{
width:85%;
min-width:780px;
min-height:672px;
background-color:Maroon;
float:left;
}
#content
{
width:740px;
height:500px;
background-color:#ccc;
margin:0 auto;
}
Someone posted the answer but for some reason its now disappeared so I can't take credit for fixing the issue.
I created a wrapper that had a min-width of 985px. I then used percentage values for the side and main content divs 15% & 85% respectively. However I didn't take into account that its 15% and 85% of the 985px wrapper.
My side bar was 15% wide with a min-width of 205px, however 15% of 985px is only 147.25px so the extra pixels was forcing the main content div below the side bar.
Hope that makes sense? Thanks for helping me out :)
The reason that your main content div goes below the menu div is due to the way that the box model works. If you change your main content div to be a inline-block, it will stay to the right of the menue. Here is a jsfiddle to show you how you can do it.
#main-content
{
display:inline-block
width:85%;
min-width:780px;
min-height:672px;
background-color:Maroon;
float:left;
}
Blocks floated to the same side only stay next to each other if there is enough horizontal space.
If I really wanted a horizontal scrollbar, I'd experiment with table layout (display: table-row, display: table-cell).
Create a div after the main-content div and give it a class of 'clearfix' and the following style:
.clearfix{
clear:both;
}
I think the problem might be that you are not clearing the floats, which is why you container div (wrapper) is messing up.
Related
I have 3 divs. The 'middle' div needs to be centered in the containing element (a seperate div that is the width of the page, basically) while the other two divs should be on either side of the 'middle' div.
Here is what I've tried so far, but as you can see, if the left and right divs aren't even in width, they push the 'middle' div off center.
<div class='cont'>
<div class='name2'>The Man with Six Fingers</div>
<div class='vs'>VS.</div>
<div class='name1'>I. Montoya</div>
</div>
.cont{
position:fixed;
top:0px;
width:100%;
background-color:red;
text-align:center;
}
.cont >div{
display:inline-block;
}
http://jsfiddle.net/7TLSa/
The solution only needs to work in Webkit since this will be in a mobile app.
I adjusted the widths, min-width, and white space to tweak its responsiveness. Is this what you're looking for?
See DEMO
.name1, .name2 {
width:30%;
min-width:160px;
white-space:nowrap;
}
I'm trying to make a div element that is the same width as the screen so that I can have part of the background a different color than the rest. I would prefer that it would be with relative position, because with absolute I have to manually set it's vertical position, and that'd get messy, though the scrollbar wouldn't appear.
Right now, I do have it so that a div will take the area of the screen and can be a different color, but it causes a scrollbar to appear. The div is over the right side of the screen by using
margin-right: -21px;
but that causes the scrollbar. If I remove that, the bar goes away but then there is a portion of whitespace on the right side of the screen. Using
overflow-x: hidden;
will hide the scrollbar, but won't prevent scrolling horizontally.
How can I make it so the scrollbar doesn't appear and I can't scroll horizontally? I have a JSFiddle for what I'm currently using.
Thank you in advance for any suggestions on how to fix this.
Although there are a few things you should fix up, removing the margin from the body, html will do the trick.
Get rid of the -21 margins and just add this style.
body, html {
margin: 0;
}
Here's your fiddle.
dirty trick that might work:
<!DOCTYPE html >
<html>
<head>
<title> Bla! </title>
<style>
div.fullWidth { display:inline-block; width:100%; background-color:yellow }
div.body { position:absolute; left:0px; top:0px; background-color:green; width:100%; height:100%; overflow:auto}
body { overflow:hidden; }
</style>
</head>
<body>
<div class='body'>
line before the div
<div class='fullWidth'> Line inside div</div>
line after div
</div>
</body>
</html>
This works for Chrome: http://jsfiddle.net/EtNgv/ I want to make it work in IE and Firefox.
Answers to other similar questions said that it is not possible - but did not mention that it was possible in Chrome - so I am hoping that someone could tweak what I have here to make it work in FireFox and IE10.
Desired outcome:
A container div that takes up 100% height - but no more.
Which wraps header and footer divs whose heights are determined by their content.
The footer div is always flush with the bottom of the page.
A middle div which stretches between the header and footer. If its content overflows it should scroll.
Image: http://i.stack.imgur.com/e7ddc.png
Current implementation:
CSS:
html,
body {
height:100%;
margin:0;
}
#container {
display:table;
height:100%;
width:100%;
}
#header,
#footer {
display:table-row;
background-color:#FC0;
height:2px;
}
#middle {
display:table-row;
overflow:hidden;
position:relative;
}
#content {
height:100%;
overflow-y:scroll;
}
HTML:
<div id="container">
<div id="header">header<br/>header line 2<br/></div>
<div id="middle">
<div id="content">Burrow under covers...</div>
</div>
<div id="footer">footer</div>
</div>
This works in Chrome, but in IE and Firefox if the content is larger than the middle div the container becomes larger than 100% high and the page obtains a scroll bar.
Well, I got close, but it still feels kinda sloppy. I can't imagine creating a page like this without using jQuery to determine the height of the screen, #footer, #header, etc...
Forked Fiddle:
http://jsfiddle.net/mRDux/
I want to make a web page that uses 100% of screen space. I have two divs:
1st - menu with fixed width (~250px)
2nd - whats left
The misleading part for me is that the menu div is not in the 2nd div. They both are in a wrapper div (100% width). The problem is that if I write 100% width for the 2nd div, it goes below the menu. If I write less %, I cannot be sure how it will be displayed in smaller resolutions.
Is there is some negative sizing or something? ATM. 1st div floats left and 2nd div float right.
UDPATE: here is some code:
div.main {
width: 100%;
}
div.1st {
width: 250px;
float: left;
}
div.2nd {
width: 100%; #here should be the space that is left in the main div#
float: right;
}
<div class="main">
<div class="1st">menu</div>
<div class="2nd">content</div>
</div>
Problem: content could be as wide as it needs to so if string or objects in it is big enough 2nd div goes below 1st. Menu width is fixed.
UPDATE #2: if i leave content width empty then it will also goes below menu since content is wide enough
Take a look at this Post, there you have the correct solution:
http://www.alistapart.com/articles/holygrail
You could do something like this : http://jsfiddle.net/steweb/78x8y/
markup:
<div id="container">
<div id="left">Width=> 250px, float left</div>
<!-- following div takes automatically the remaining width, no need to declare further css rules -->
<div id="remaining">Width => the remaining space</div>
</div>
css:
#container{
width: 100%;
float:left;
overflow:hidden; /* instead of clearfix div */
}
#left{
float:left;
width:250px;
background:red;
}
#remaining{
overflow: hidden;
background:#DEDEDE;
}
Yes, you can determine the width of absolutely positioned elements by setting left and right. This makes the browser solve the equation in the standard for width. See this demo for an example.
Hi I have a container which has a width of 1150px. Now I have this other mainmenu, with width: 100% that I want to place inside the container. But then ofcourse it only get 100%(1150px) but I want it full width from side to side, so it should ignore the setted width only for .mainmenu
I tried position: absolute which made it all wrong and weird
#mainmenu
{
height: 37px;
width: 100%;
margin: 0px auto;
background-image: url(../images/mainmenu_bg5.jpg);
}
Why is the menu in the container in the first place? If you want the menu to span the full width yet the contents of the container are only 1150px I think it is by definition not right to put the menu in the container. Consider restructuring your document. This is an example, I do not have your full code:
<body>
<div id="page">
<div id="header" style="background:Blue;">
header header header
</div>
<div id="mainmenu" style="background:Green;">
menu menu menu menu
</div>
<div id="container" style="width:1150px;margin:auto;background:Red;">
container container container
</div>
</div>
</body>
And if you want the contents of the header and menu to span no farther than 1150px which I think is what you want then consider this:
<head>
<style type="text/css">
.pagewidth {
width: 1150px;
margin: auto;
}
</style>
</head>
<body>
<div id="page">
<div id="header" style="background:Blue;">
<div class="pagewidth">
header header header
</div>
</div>
<div id="mainmenu" style="background:Green;">
<div class="pagewidth">
menu menu menu menu
</div>
</div>
<div id="container" class="pagewidth" style="background:Red;">
container container container
</div>
</div>
</body>
If your container is fixed-width, but you want a menu which has a background at full page-width, then you can have the menu background as a positioned background of html, and maintain the same HTML code. This will make the menu's background "bar" cover the whole page width.
Example of this method: http://templates.arcsin.se/demo/freshmade-software-website-template/index.html
How to do this: use positioned backgrounds:
http://www.w3schools.com/css/pr_background-position.asp
css is below, but sometime it depend from the content inside:
#mainmenu
{
height: 37px;
width: 100%;
margin: 0px;
position: relative;
background-image: url(../images/mainmenu_bg5.jpg);
}
This is a jQuery solution:
$('#mainmenu').width() == $('#container').width();
To get a background image to simulate the menubar spanning the entire width of the page you need to apply the #mainmenu background to the body or a container div like so:
body {
background: url(YOURIMAGE) repeat-x left 64px;
}
The 64px needs to be how far the #mainmenu is from the top.
If the body already has a background image then you will need another div just inside the body containing everything else. If you have no control over the HTML then using javascript to insert a div that will either wrap all the content or get rendered behind it (using position and z-index.)
position:absolute is the best way to get this while keeping the background in #mainmenu. In fact, it's the only one I can think of off the top of my head. Without javascript, of course. Everything else will require changing HTML or moving the background property to a different place.
#mainmenu
{
position:absolute;
left:0;top:??px;
width:100%;
height:37px;
background-image: url(../images/mainmenu_bg5.jpg);
}
Because #mainmenu's width:100% then will become 100% of the viewport rather than the containing block. (Unless a parent is position:relative or overflow:hidden)
So when you say it "got all weird", I assume that's because of other things on the page. Both absolute and float take items out of the normal document flow. So things below the menu can & will end up underneath it.
#mainmenu
{
position:absolute;
left:0;top:??px;
width:100%;
height:37px;
background-image: url(../images/mainmenu_bg5.jpg);
}
#mainmenu + *
{
padding-top:37px;
}
/* Exact selector not recommended due to poor browser support */
The solution to that is, basically, applying 37px of margin or padding to the first thing after #mainmenu. You'll also be unable to center absolutely positioned elements using margin:0 auto, but if you want it spanning the full width of the viewport, that shouldn't be a concern...If you want to center the live sections of the menu, of course, you'll need some sort of descendant to center:
#mainmenu
{
position:absolute;
left:0;top:??px;
width:100%;
height:37px;
background-image: url(../images/mainmenu_bg5.jpg);
}
#mainmenu > *
{
margin:0 auto;
}
/* Exact selector not recommended due to poor browser support */
/* & more properties needed if descendant is list with floated <li>s */
#mainmenu + *
{
padding-top:37px;
}
/* Exact selector not recommended due to poor browser support */
But there are lots of things you'll see change in relation to other things on the page with position:absolute. So to troubleshoot that I really need to know more about the other things on the page.
You may find another solution, but if you don't -- post a page I can look at & I may be able to help you with the weirdness you experienced with absolute positioning. That is, if it will work with this particular layout.