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%;
}
Related
I know it's a super-basic question, but I'm not able to find a solution. I have 2 div and I would like to display them as blocks (one below the other) without having 100% width. Here's my code.
HTML
<div id="container">
<div class="test">one</div>
<div class="test">two</div>
</div>
CSS
.test {
display:inline-block;
clear: both;
border:1px solid;
}
#container {
clear:both;
text-align:center;
}
Unfortunately this answer doesn't fit to me, since I need to center blocks horizontally (so float cannot be applied in my case). Here's the fiddle. Thanks in advance.
to center them on top of each other without taking 100% width and still use margin:auto; use : display:table;
.test {
display:table;
margin:auto;
border:solid;/* to see it */
}
You can specify the width of the divs, change display to block, and use margin: 0 auto to center them.
JSFiddle
You can also center the div by adding 50% left offset, and then negative margin in amount to half width of the div. I do not know how much is this applicable to your case, but here is an example:
.test {
position: relative;
border:1px solid;
width: 300px;
left: 50%;
margin-left: -150px;
}
You can see it in action here: http://jsfiddle.net/b8LuQ/7/
display:inline-block; is not allow the second line. Therefore I removed it and define width for both div test one two you can resize it and margin:auto is align center the both div in container here is an example
I can't seem to figure this out.
I have the following code:
<div id="wrapper">
<div class="schedule">//blah</div>
<div class="schedule">//blah</div>
<div class="schedule">//blah</div>
<div class="schedule">//blah</div>
//
</div>
I want the div #wrapper to of fixed width. And I want each .schedule to be also of a fixed width. I then want, it I have too many in the div, I could just scroll left and right inside that page.
I can't do this!! No matter what I try, when I add more .schedule, they pop to the bottom of the page, and start filling the next row!
Cheers
Kousha
EDIT: Thank you. All the results work. EXCEPT I need to be able to use float: left; or something so that all divs are stock to each other! How can I do that?
It can be done with the following CSS:
#wrapper {
overflow-x: auto;
white-space: nowrap;
max-width: 300px;
border: 1px solid red;
}
#wrapper .schedule {
display: inline-block;
padding: 5px;
}
I've put together a basic JSFiddle demonstration.
Live Demo
Hi now used to this css
#wrapper{
min-width:200px;
background:red;
font-size:0;
white-space:nowrap;
}
.schedule{
height:100px;
font-size:12px;
width:100px;
background:green;
margin:1px;
display:inline-block;
vertical-align:top;
}
Demo
Now change to width or height according your layout .........
I suspect what you want is the schedule-divs to float to align themself on the same height.
Try adding this to your css:
#wrapper{overflow:auto;}
.schedule{float:left;}
Sorry if I missunderstod your specification, but I think that's what you really want.
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.
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.
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