I've had a look for problems similar to this, but none of the fixes prescribed in the other questions have worked in my case. Basically, my body width is set to 100%, and I have no padding or margins in any other divs, and yet I still have a strange horizontal scrollbar at the bottom and about 50px of blank space to the right of the layout. It should stop where the red line is here:
Have racked my brain and racked the questions here, but have no clue what's going on. Would be extremely grateful for advice. Relevant CSS:
body, html {
color: #000000;
font-family: 'Open Sans', sans-serif;
font-size:12pt;
background:#f2f2f2;
padding:0;
margin:0;
height:100%;
border:0;
/* overflow:hidden; */
}
#menubar {
position:absolute;
top:0px;
background:#FDBB30;
height:80px;
width:100%;
font-weight:bold;
}
#content {
position:absolute;
top:80px;
width:92%;
left:50px;
background:#ffffff;
height:calc(100% - 80px);
}
EDIT: HTML in the test page:
<body>
<div id="container">
<div id="menubar"><?php require 'menubar.php'; ?></div>
<div id="content">
<h1>Avis libertatis volebit semper</h1>
<h2>avis libertatis volebit semper</h2>
<p>avis libertatis volebit semper</p>
</div>
</div>
</body>
You use width: 92% and left: 50px.
At about a window width of 600px, the content will be 600*0.92 = 552px width. Add the left position of 50px to it, and the total width is 602px. Which is wider that you window width.
So instead of using left: 50px, use left: 4%
DEMO
Might it be your browser allowing space for a scroll bar?
Modify your CSS as shown below:
#content {
position:absolute;
top:80px;
left:50px;
width:calc (100%-50px);
background:#ffffff;
height:calc(100% - 80px);
}
Notice that line: width:calc (100%-50px);. Alternatively, you can use left:4%; and width:92% (as pointed out by #LinkinTED): both solutions should work. I would also recommend to clean up your actual page HTML: it seems inconsistent with your description.
Hope this will help. Best regards,
Related
I keep finding almost solutions to something that I feel should be really simple, but can't figure it out. (note - i'm at a really rudimentary stage of learning CSS right now)
I have one image to put on a page. Center horizontal/vertical. In a div container that is 80% of the window height and width. I would like the image to stretch to fill either the height or the width of that div, based on whichever is smallest.
I'm sure this is simple for most, but again, I'm just learning. Any direction on this would be wonderful.
I created an illustration in case i'm not explaining well enough:
Try this http://jsfiddle.net/David_Knowles/ddh2k/
This does most of what you want. You'll need to add some extra javascript if you really only want the image to be 80% of the available height when the screen height is reduced to less than the image intrinsic height.
<body>
<div id="container">
<img src="http://dummyimage.com/600x400/000/fff.jpg" alt="apropriate alt text">
</div>
</body>
html,
body{
height:100%;
width:100%;
margin:0;
padding:0;
background-color: #eee;
}
#container{
margin: auto;
width:100%;
height:100%;
text-align:center;
font-size:0;
white-space:nowrap;
background:#aae;
}
#container:before{
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
img {
width:80%;
height:auto;
display:inline-block;
vertical-align:middle;
background:#fff;
}
I have a main div at the center of the screen at the shape of the touch pad.
Within it I have another div in which I want to display output. However, the pad itself is set on % to react on different resolutions.
See the pic below, yellow window is the whole pad and the red window is the content screen.
Now I want to make that red window exactly as the pad's screen is set on % so it could adapt on different resolutions, is there a simple way of doing that?
Yellow's css:
#mainWindow{
margin-left:auto;
margin-right:auto;
background-image:url("../images/mainWindow.png");
background-size:100% 100%;
height:100%;
width:80%;
position: relative;
border-style:solid;
border-width:3px;
border-color:yellow;
}
The red one doesn't really have anything.
I hope you understood me. Thanks beforehand.
EDIT:
html code for the screens:
<div id='mainWindow'>
<div id='screen'>
</div>
</div>
In order for a DIV to have 100% height, you need to make its parents 100% height as well:
body, html {height:100%}
Slightly confusing prompt, but see if this works for you:
http://jsfiddle.net/T3MHZ/
HTML snippet:
<html>
<head></head>
<body>
<div id='mainWindow'>
<div id='screen'></div>
</div>
</body>
</html>
CSS styles:
html, body{
width:100%;
height:100%;
margin:0;
}
#mainWindow{
margin:0;
height:100%;
width:100%;
/* SET THE PADDING TO THE PX MEASURE OF THE TABLET BORDER */
padding:50px 40px 50px 40px;
/* box sizing will make sure that the usable content size is minus the padding value */
box-sizing:border-box;
position: relative;
border:1px solid black;
}
#screen{
width:100%;
height:100%;
border:1px solid red;
}
By using a combination of measured padding on #mainWindow to account for the tablet border, and box sizing of border-box to assure exact fit of the #screen content, this should give you the flexible layout you're looking for.
Don't forget your viewport meta tag! ;)
I'm not sure if I'm understanding what you want correctly, but try
height: 100%;
on red.
min-height:100%;
You have no content, it's going 100% of it's parent content. Diodeus's answer would work as well for the same reason, if the body, html are 100% window height then the divs inside will look at that as content.
http://jsfiddle.net/calder12/Jq7xR/
<body>
<div class="container">
<div class="outside">
<div class="inside"></div>
</div>
</div>
</body>
.container{height:250px;width:400px;}
.outside{border:1px solid red; min-height:100%; height:100%;}
.inside{border:1px solid green; min-height:82.5%; margin:5%}
To be honest even my brain is struggling with the 82.5% height to get the margins to work right =/ But I do believe that is what you're after.
I have the following code:
<div id="headerwrap">
<div id="headertop">aaa</div>
<div id="headermiddle">abc</div>
<div id="headerbottom">def</div>
</div>
#headerwrap { position:fixed; top:0; left:0; }
#headertop { height:55px; margin:0 auto; }
#headermiddle { height:25px; margin:0 auto; }
#headerbottom { height:9px; margin:0 auto; }
I am trying to follow the header with a fixed position . When I do this I find an overlap. Checking with firebug I find the following:
headerwrap height - 91px
headertop height - 55px
headermiddle height - 25px
headerbottom height - 9px
Can anyone explain to me why the numbers don't add up? This is giving me position problems and I can't see what's wrong.
Why does 55+25+9 add up to 91?
I get 89px, here's a demo.
Are you sure that's all the CSS and that there aren't borders or extra styles on any of the elements?
EDIT: Just seen your comment on the other answer :)
Are you sure the content in #headerbottom isn't taller than 9px? You might need to use overflow-y: hidden;
By the way, with that code, headerwrap should have the same height as headertop, it shouldn't be the sum of the others, because 9 + 25 is not greater than 55.
I hope this is not a repost! I have looked everywhere and so I am sorry if it is.
I have a header div that is position:fixed and it has some image links and a login div. Since the position:fixed is relative to the window, whenever I resize the windows to test liquidity, the content in the header div gets jammed and starts to drop down the page.
Is there anyway to get a horizontal scroll bar to appear and remove the space? I have min-width set on the body and the header div but no luck. I am not coding for IE at the moment and only using latest Chrome and Firefox for testing now.
Thank you for any help!
CSS:
body {
min-width:1000px;
padding-top:0;
padding-bottom:0;
margin:0;
background-color:#022F00;
}
.container {
padding: 0;
margin-left:auto;
margin-right:auto;
height:100%;
margin-top:160px;
}
.header {
width:inherit;
padding:5px;
position:fixed;
left:20px;
right:20px;
top:15px;;
min-width:850px;
}
.login {
float:right;
padding:0;
margin:0;
border:0;
position:relative;
}
img {
margin:0;
border:0;
padding:0;
}
a {
margin:0;
border:0;
padding:0;
}
HTML:
<body>
<div class="container">
<div class="header" id="titlebar"><img src="title.jpg" /><img src="newaccount.jpg"><img src="newarticle.jpg">
<div class="login" id="logindiv">content</div>
</div>
</div>
</body>
i found this solution, it may help you
Set a min-width to your container:
#container { min-width: 1000px;}
you may want to check this link
Two divs floating left and right: How can I keep them on the same level when a page resizes?
it was an answer to
"Two divs floating left and right: How can I keep them on the same level when a page resizes? "follow this link
Im not too great at CSS but hopefully someone on here can help. I have the following mockup. (i have stripped out my content to make it easy to view)
<body>
<div id="container">
<div id="header"></div>
<div id="body">
<div id="navBar"></div>
<div id="mainContent"></div>
</div>
<div id="footer"></div>
</div>
</body>
my CSS is as follows:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
now im unsure as to how to get the "navBar" to be the page height. I've tried adding height: 100% but that doesnt work.
Thanks,
Matt
Giving an element height: 100% will give it a height equal to that of its containing element, which in your case is #body. Since body in your example is only as big as it needs to be to hold its content, #navBar will be 100% of that height.
To fix this, you can make #container and #body height:100% to make them as tall as tho body tag, which takes up the whole page:
#container {
height:100%
}
#body{
height:100%;
}
In the interest of completeness, you could also set the top and bottom of #navBar:
position: absolute;
top: 20px;
bottom: 60px; /* height of footer */
To understand the difference, play around with This JS Fiddle. Mess around with the height and top, bottom, position properties to see how your changes affect the layout; just don't use both positioning methods at once!
Your issue appears to be that each parent DIV all the way up to the BODY tag must explicitely have a height of 100% for #navBar to have 100% height. This means you would also have to set the height of #body to 100% as well, since it is the parent container of #navBar.
Have a look at this site - I assume you want a two column layout - this site will show you how to do what you want. Hope it helps.