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.
Related
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,
How can I make my center stay on the top and the red stripe on the left?
http://jsfiddle.net/9G8aw/
CSS for the center div looks like this:
#center {
width:840px;
margin:0 auto;
float:left;
background-color:#FFFFFF;
border-radius:15px;
position:relative;
}
you have to give your center a percentage width 85% instead of a fixed 840px
If you can rearrange your divs, You can do something like this.
put <div id="left">...</div> below <div id="center">...</div>
and use the same CSS you are using now.
DEMO FIDDLE
Use min width
#container {
margin-left:auto;
margin-right:auto;
min-width: 1200px;
}
Here you go: http://jsfiddle.net/digitalextremist/eR7uu/
I changed #center to float: right and in that changed width: 85% also.
This solves your "static size" problem. I put min-width: 640px in the body but you can take it out.
Again, welcome to StackOverflow!
Edited: http://jsfiddle.net/digitalextremist/eR7uu/1/
.header {
white-space:nowrap;
padding: 0px 5%;
}
This css has been somewhat difficult to figure out...Basically what I want is what is in this picture, but with dynamically changing content.
so I set up my html like this, basically all the elements are piled into the wrapper, the pictures and titles will be dynamically rotating and will be different widths and heights:
<div id="wrapper">
<div id="title"><h2></div>
<div id="image"><img></div>
<div id="leftbutton" class="but"><img></div>
<div id="rightbutton" class="but"><img></div>
</div>
Everything I have tried Hasn't worked out. how should I go about this?
The closest I have got is this, but the title field can change heights and that makes this method not work, since, I have to position the image relatively and its relative position changes with the title element growing and shrinking:
#wrapper{
position:relative;
text-align: center;
}
.but{
z-index:20;
position:absolute;
}
#leftbutton{
left:0px;
}
#rightbutton{
right:0px;
}
#title{
z-index: 3;
display: inline-block;
width:auto;
min-width: 80px;
max-width: 340px;
}
#image{
z-index: 1;
position: relative;
top:-21px;
}
If you mean the Title in the center use this way:
#title {
margin: 0 auto;
width: /* your width */
}
the position should be relative at the wrapper.
JsFiddle UP
I just reorganized the body structure, adding one more div and floating everything.
Then inside the central section I added title and image that you can style to be centered to the relative div.
If you provided some example code we would better be able to assist you. In the meantime, the following code should take care of what you're looking for:
HTML
<div id="wrapper">
<div id="title"><h2>Article Headline</h2></div>
<div id="image"><img></div>
<div id="leftbutton"><img></div>
<div id="rightbutton"><img></div>
</div>
CSS
#wrapper {
background:#6cb6d9;
display:inline-block;
position:relative;}
#title {
position:absolute;
top:0;
width:100%;
text-align:center;}
#title h2 {
background:green;
color:white;
padding:10px 15px 10px 15px;
display:inline-block;
max-width:200px}
#image {}
#image img {
min-width:200px;
height:300px;
width:500px; }
#leftbutton {
position:absolute;
left:0;
top:0;
height:100%;
width:75px;
background:black;}
#rightbutton {
position:absolute;
right:0;
top:0;
height:100%;
width:75px;
background:black;}
Though instead of hardcoding the img size, just remove those lines of CSS to have the div automatically adjust to the default size of the img.
http://jsfiddle.net/b7c7c/
None of these solutions worked correctly, ultimately the way to get it to work is with this trick: How to center absolutely positioned element in div?
Then you just position all elements absolutely within the wrapper and the sub elements relatively as seen in the post
I have the following HTML code:
<div id="inner">
<div id="wrap">
<img src="images/thumb/3.jpeg"/>
</div>
</div>
And the following style applied to it:
body{
background:url(pattern/pattern1.png);
}
#inner{
margin:0 auto;
position:relative;
height:400px;
width:400px;
background:#669;
text-align:center;
}
#wrap{
width:50%;
margin:0 auto;
}
The problem is that the image it always stay top-centered in inner div but i want it to be in center of wrap
!--------------------------------------------------------------------------
Still same problem and heres the code in jsfiddle: http://jsfiddle.net/RNhvz/
You should apply the margin to the image element directly: JSFiddle example1
Your margin: 0 auto is part of your problem.
Do you know the height of your image? I presume it is under 400px. Change the 0 in your margin style to half the difference between 400 and the height of your image.
For example, if your image is 200px in height, change your margin style to:
margin: 100px auto
(400 - 200) / 2 = 100
If your #inner is always going to have 400px height then just use this code:
#inner{
/* Your code: */
margin:0 auto;
position:relative;
height:400px;
width:400px;
background:#669;
text-align:center;
/* Solution part I. */
line-height: 400px;
}
/* Solution part II. */
img {
margin: 0 auto;
vertical-align: middle;
}
That way an image will be centred both vertically and horizontally and - what's more important - this solution doesn't require you to know the image size. And you don't need the #wrap div. You can keep in in your HTML syntax but there's no need for width and margin rules of this element.
Here's the working code: http://tinkerbin.com/YOjVvnVZ.
How should I make this with CSS:
I would like to have 2 divs or more and their width should be in percent, but the margin between the divs should be fixed, in this example 30px
The problem for me is the margin between the two divs because I can put the divs into a bigger div and set left and right padding to 30px and thats ok, but what should I do with the margin between the two divs?
If I try to add for example to the first div margin-right:30px; then the width of the div will be 70% + 30px what will be overall greater than 100% and the second div will fall down.
So what is the solution for this?
Is this close enough?
Live Demo
HTML:
<div id="container">
<div id="left"><div id="left2">leftgggg</div></div>
<div id="right">right</div>
</div>
CSS:
#container {
margin: 0 30px 0 30px;
overflow: hidden;
background: #f3c
}
#left {
float: left;
width: 70%;
position: relative;
left: -30px;
}
#left2 {
height: 200px;
margin: 0 0 0 30px;
background: #ccc
}
#right {
height: 200px;
float: right;
width: 30%;
background: #666
}
Calc support is decent now, so you can use that to mix and match units. Using that, you can come up with something that works pretty well:
http://jsfiddle.net/CYTTA/1/
#a {
margin-left: 30px;
width: calc(70% - 30px - 15px);
}
#b {
margin-left: 30px;
margin-right: 30px;
width: calc(30% - 30px - 15px);
}
You may have to prefix calc with -webkit or -moz.
The width of the first one is 70% minus the left margin (30px) and minus half the middle margin (15px). The second one is 30% minus the right margin (30px) and minus half the middle margin (15px).
While the widths won't be exactly equal to 70% and 30%, you'll have a fluid layout with fixed margins.
I found a way to do this keeping the ratio of the widths of the containers exactly 70% : 30%. Try this, works for me...
HTML:
<div id="page">
<div id="a"><div id="aWrap">This is 70% of the available space...</div></div>
<div id="b"><div id="bWrap">This is 30% of the available space...</div></div>
</div>
CSS:
*{
margin:0;
padding:0;
}
#page{
margin:30px;
}
#a{
width:70%;
float:left;
}
#aWrap{
margin-right:15px;
background:#aaa;
}
#b{
width:30%;
float:right;
}
#bWrap{
margin-left:15px;
background:#ddd;
}
Best of luck!
It may be obvious, and you've probably already twigged, but (70% + 30% + 30px) > 100%. Without some kind of calculative ability, this won't work, and CSS2 doesn't appear to have that ability. Javascript could do it, as another poster has suggested, and CSS 3 is due to add it, apparently.
Not that it's a solution to your original enquiry, but you can enforce a fixed width on the right hand container, and maintain fluidity on the left.
<div style="margin-left: 30px; float: right; width: 270px;">
<p>Content text ...</p>
</div>
<div style="margin-right: 300px;">
<p>Sidebar text ...</p>
</div>
The original commenter is correct though, your best bet is one or the other.
Here my solution.
html
<div id="wrapper">
<div id="left"></div>
<div id="rightWrapper">
<div id="right"></div>
</div>
</div>
css
#wrapper {
margin:0 30px;
}
#left {
width:70%;
height:200px;
background:black;
float:left;
}
#rightWrapper {
margin-left:99px;
}
#right {
width:30%;
height:200px;
float:right;
background:grey;
}
Demo: http://jsfiddle.net/GEkG7/1/
Yeah, my solution was similar to others. A #wrap has 30px padding, #main and #side have their percentages set and floated left and right respectively. #main has an extra <div> inside it with 30px of right margin.
http://jsfiddle.net/Marcel/FdMFh/embedded/result/
Works fine in all the modern browsers I have installed (Chrome, Firefox, Safari, Opera, IE9 RC), I'm sure it'll break down somewhere older but should be fixable.
Thirtydot has a nice answer (up vote from me) to adjust the left positioning of the div relative to its container, I would only suggest that it may need testing in certain browsers, such as older versions of Internet Explorer.
Alternatively you could consider that adjusting a left position by a fixed amount is more confusing than just applying a different width.
Your also asking for a fluid width and a fixed margin, overall this is no longer a fluid layout... your 30px will look the same in a large or small resolution.. but your widths will change, either fix the widths to pixels or set the margin to a percentage (Maybe try using max-width for some browsers too for bigger resolutions). Newer browsers also adjust a pixel layout when increasing the text/zoom size, older browsers require use of EMs for text size changes.
example with percentages and padding:
#container {
margin: 0 8% 0 8%;
overflow: hidden;
background: #f3c
}
#left {
float: left;
width: 62%;
position: relative;
padding-right: 8%;
}
You can use the javascript onload and onresize functions. In each you first find the width of the container grid and then calculate the width of your 70pc and 30pc grids in pixels and set them via JS.
For example use the following code in your onload and onresize functions for the page:
container_width = document.getElementById('container_box').style.width
width_70 = (container_width - 90) * 0.7
width_30 = (container_width - 90) * 0.3
document.getElementById('seventy_pc_box').style.width = width_70
document.getElementById('thirty_pc_box').style.width = width_30