I have 3 div's:
.left, .right {
width: 30px;
resize: none;
}
.left {
float: left;
}
.right {
float: right;
}
.center {
max-width: 960px;
margin: 0 auto;
}
What I want to achieve is that only the middle one resizes when resizing the browser. In the left and right div there is an image that is part of the design.
When I make the browser smaller, the left en right div will narrow at one point and it seems that it is getting pushed into the center div. This makes the content of the center being pushed down. How can I make sure the 2 div will stay #30px?
Strange thing is, in the jsfiddle it does work...
jsfiddle
The issue is with the <img /> element you have in the header. When you hide it you can see that it no longer interferes with your layout.
The problem is because the <img /> element will expand to the maximum size of the container, which is 100%. That 100% does not include the 30px you have reserved for each side, as floated elements are taken out of the document flow. Declaring 100% of a child element means it will expand to the width of its parent elements, without taking into account the extra space taken up by floated siblings. Therefore, a solution would be using CSS calc to constrain the width of .center, and float it to the left, too:
.center {
width: calc(100% - 60px);
}
Alternatively, you can give .center a margin of 30px on the left and on the right. The floated divs will ignore margins because they are taken out of the document flow, and will fit perfectly within that 30px corridor you have created for them.
.center {
margin: 0 30px;
}
Both methods I have tested and verified by playing with the Inspector on the link you have provided. The calc() method might suffer from lack of support in older browsers, while the margin method will work for most browsers that are in use today :) pick any one.
Try setting the horizontal margin for your center div to the known width of the left and right divs:
.center {
max-width: 960px;
margin: 0 30px;
}
Related
Id like to know why my inner wrap of the desktop css for this site is not working.
Basically if set innerwrap to margin:0 auto; and width: auto; there is no problem, but it's not centered on the footer or main div
When I have innerwrap as it's currently set margin:0 auto; and width:960px; you'll notice that the page presents a horizontal scroll bar after resizing the window a bit, and all the content is squished to the left with a white background starting to become visible.
Is there anyway to have it transition fluidly to the next tablet size layout without have a scroll bar appearing and content getting squished?
It shows Scrollbar because of the padding you apply in .innerwrap
Read this article about the Box Model
Use of padding on the sides of certain elements when applying 100% width to parent element its not recommendable because it adds width to the whole group, and since you,re using the browsers width it shows the scrollber to see the extra space you added.
My humble advice is that if you want a block element to appear centered apply an margin:auto style rule whenever is possible, the same also has to be displayed as a block element with no float.
Remove this:
.innerwrap {
margin-left: auto;
margin-right: auto;
padding-left: 10%;
padding-right: 10%;
width: 80%;
}
Keep This
.innerwrap {
margin: auto;
width: 960px;
}
Since you are applying fixed margins for you social icons they will show misplaced, so don't use fixed margins for centering them, use percentage width instead.
you may want use a common class for aligning them
.social {
background-position: center center;
background-repeat: no-repeat;
display: block !important;
float: none;
height: 150px;
margin: auto;
padding-top: 50px;
width: 30% !important;
}
For a.twittersocial and a.twittersocial:hover and the rest of the social links just keep the background properties.
Create a determined class if you need to apply common style rules to several elements (if there are many of them) and avoid usage of ID selectors whenever is possible, use classes instead (.daclass).
Use a web inspector like Firebug to track down styling errors.
Good luck Developer!
i'm having a problem with divs.
I've been searching but couldn't get a solution.
I have 2 divs in a header. One containing logo and other contanining other things. First is 210px width and the second is 100% width (Fill available space).
I want to have the two on the same line.
I've been trying playing with display: inline, inline block, float left, but not working, second div is taking 100% of page and displaying below logo div.
Thanks in advance.
Source: http://jsfiddle.net/ukDQS/1/
You don't need most of that junk. It's pretty easy. You're over thinking the problem.
First, a div is 100% by default, so you don't need to have the 100% on it. Second, you just need to float the logo left, and assign a width to that. That's all there is to it. Get rid of all the display and other float and other kinds of positioning elements.
http://jsfiddle.net/QYftP/
Follow the solution:
http://jsfiddle.net/ukDQS/3/
div#header-right-content { div.logo }
#logo {
float: left;
height: 80px;
padding: 5px 0 0 5px;
width: 210px;
}
#header-right-content {
height: 80px;
margin-left: 210px;
position: relative;
}
You don't need to set width 100% to the second div, because it'll expand to the fullr est of space.
I currently have a footer that uses a 3 column layout with a fixed center and fluid sides in order to get a nice box shadow effect. When the window is too small however, it pushes the footer to the left, and messes everything up.
I can't seem to figure out how to make sure the footer divs do not get pushed around. I keep running into this problem with my layouts.
The layout I am working on is here, and a screencast showing the problem is here.
The easiest solution is simply to add min-width:980px to #container.
#container {
background: none repeat scroll 0 0 #A8D9A7;
height: 100%;
min-height: 100%;
position: relative;
z-index: 5;
min-width: 980px; /* add this */
}
The 980px figure comes from the width:960px + padding-left:10px + padding-right:10px of the #content-container.
The container element for your main page body (<div id="body">) has computed padding-left of 10px, and the second container element, (<div id="content-container">) adds another padding-left of 10px, meaning your main body is padded from the left by 20px.
Whereas the container for your footer (<div id="footer-container">) has computed padding-left of 0.
If you add this, it will fix your problem. #footer-container {padding: 0 20px;}
Revised as the above solution messed up bottom box-shadow.
In the #footer-left-outer { rule change:
margin-right:470px;
to:
margin-right:-490px;
In the #footer-right-outer { rule change:
margin-left:-470px;
to:
margin-left:-490px;
In the #footer { rule change:
padding: 10px 10px 10px 10px;
width: 940px;
to:
padding: 10px 30px;
width: 980px;
I now understand why you were using the outer-right and outer-left.
I found a different solution that includes the partial box-shadow effect:
http://jsfiddle.net/nottrobin/Cr4NF/10/
It avoids the need for footer-left-outer and footer-right-outer but I'll leave it up to you to decide if it's neater.
It makes use of :before which only works in IE8 onwards:
http://caniuse.com/#search=:before
But then box-shadow doesn't work in IEs < 9 anyway:
http://caniuse.com/#search=box-shadow
I have a page which is divided up into 3 divs, left center and right. I don't want to display anything in the left and right, they just frame the page.
#leftDiv
{
background-color: Gray;
width: 10%;
left: 0px;
top: 0px;
position: absolute;
height: 100%;
}
#rightDiv
{
background-color: Gray;
height: 100%;
width: 10%;
left: 90%;
top: 0px;
position: absolute;
clear:both;
}
The center div has a table, which allows the user to select how many rows to see. If they chose a large value then the body of the table went beyond the bottom of the left and right div.
To correct this I put the following code in
if ($("#leftDiv").length == 1) {
$("#leftDiv").height($("body").height() + "px");
}
if ($("#rightDiv").length == 1) {
$("#rightDiv").height($("body").height() + "px"); ;
}
this works fine until the user selects a smaller value than the page size, after selecting a larger value.
Then the left and right divs get set to less than 100%.
What i need is a way to find out what 100% is in pixels and then I can compare this to the height of the body and decide which is bigger.
Any ideas?
Thanks
John
Use margin: 0 auto
Kill your left and right columns, give your main div a width, and then center that div using an auto left and right margin. For example:
#mainDiv {
width: 80%;
margin: 0 auto;
}
Why are you creating empty elements to frame the page? How about setting the body background to the colour you require and:
#center_div {width: /* whatever */;
margin: 0 auto; /* to center in the viewport */
overflow: auto; /* or visible */
}
You could leave off the overflow property, and simply use min-width in place of width (I can't remember how cross-browser compatible this is) to define the 'normal' width, in such a way that the content will force the div to be larger as required to display the content.
If the left and right divs don't have any contents, then there's no need for them to be separate divs: apply their formatting to your container div instead, and center your contents div using margin: 0 auto. Obviously, you'll need to give the container div a specified width, and a non-transparent background. Then you can let the browser take care of resizing the window as needed - there's no need for you to reinvent the wheel for that part.
CSS:
#container {background-color:gray;}
#content {background-color:white;width:80%;margin:0 auto;}
Html:
...
<body>
<div id="container">
<div id="content">
...your content here...
</div>
</div>
</body>
...
(If your page doesn't have a container div, then you can apply the background color to the body element instead, and save even more code.)
I'm trying to build a quick overview that shows the upcoming calendar week. I want it arranged horizontally so it can turn out to be quite wide if we show a full calendar week.
I've got it set up right now with an inner div with a fixed width (so that the floated "day" divs don't return below) and an outer div that's set to width: 100%. I'd LIKE for the outer div to scroll horizontally if the page is resized so that the inner div no longer fits in it, but instead the outer div is fixed larger at the width of the inner div and the page itself scrolls.
Gah I'm not good at explaining these things... Here's a bit of code that might clear it up..
The CSS:
.cal_scroller {
padding: 0;
overflow: auto;
width: 100%;
}
.cal_container {
width: 935px;
}
.day {
border: 1px solid #999;
width: 175px;
height: 200px;
margin: 10px;
float: left;
}
and the (simplified) structure:
<div class="cal_scroller">
<div class="cal_container">
<div class="day">Monday</div>
<div class="day">Tuesday</div>
<div class="day">Wednesday</div>
<div class="day">Thursday</div>
<div class="day">Friday</div>
</div>
</div>
So to try again - I'd like the cal_scroller div always be the page width, but if the browser is resized so that the cal_container doesn't fit anymore I want it to scroll WITHIN the container. I can make it all work if I set a fixed width on cal_scroller but that's obviously not the behavior I'm going for. I'd rather not use any javascript cheats to adjust the width of the div if I don't have to.
Your cal_scroller class is 100% + 20px (padding) wide. Use a margin on cal_container instead, like so:
.cal_scroller {
padding: 10px 0;
overflow: auto;
width: 100%;
}
.cal_container {
margin: 0 10px;
width: 935px;
}
See here for a description of how the box model works (in short, the everything is outside the width/height of an element).
Also, block elements (like <div>s) are 100% width by default, making your 100% width declaration redundant.
One problem I see is your width: 100% rule. div.cal_scroller is already a block-level element, so it'll default to filling the entire page width. (Not to mention that padding is added on top of width, so you end up with that div being bigger than the page.)
Just get rid of that width rule, and you should be golden. (I just tried myself, and it worked like a charm.)
I didn't read your question very carefully, but when you have width: 100% and padding, that's generally not what you want.
100% + 20px > 100% - that might be the problem.
I struggled with this a lot but the simplest solution I found was adding:
.cal_container { white-space: nowrap; }
This way you don't have to give it a width at al. It just makes sure everything stays in one line.