I've been working on http://healthimpactnews.com and I need to fix this issue asap.
For some reason, IE, and IE only, squeezes the right-hand sidebar down below the other divs even though all the div columns are floating and within a fixed width container. My browsers create a horizontal scroll bar when the are sized down, but IE just forces the div down, instead.
Anyone know why?
The div with class ct_w is 1000px width;
The first child of that (ct) is also 1000px width,
so it pushes the second child ct_c3 (the right bar) away... (down)
solution:
completely remove the width property of the div with class ct
.ct {
margin: 0px auto;
width: 1000px; /** <--- remove this **/
}
Yes, your container, "ct_w", has a width of 1000px; your left column, "ct" also has a width of 1000px. There is no room left there for your sidebar, "ct_c3". The other browsers are actually being nice by rendering the sidebar where it is. In fact, they're only doing that because you didn't clear your floats, so they don't understand the box model of ct_w.
Use a clearfix on ct_w, set the width of ct to 750px (or 749px for IE7), and make ct float left, then you will see the layout you're looking for.
Try setting the following:
.ct_w {
...
float: left;
width: 750px;
...
}
.ct_c3 {
...
float: right;
...
}
The following seems to work as well:
.ct
{
float:left;
width:750px;
}
And remove the margin part, because it is not needed when floating the toolbar next to it.
Related
So basically, I want two divs to sit inside another div. The first one is sitting inside with no issues, but the second one floats underneath the parent. When I add overflow:hidden I can't see the div anymore. The closest I've gotten to a solution was to add overflow:auto, but that just creates a scroll bar. I have tried resizing, different positioning, overflow and clearfix but so far I can't find a solution. Any ideas guys? JSFiddle demo here http://jsfiddle.net/QLbGc/ Thanks for any help, it's been annoying me for a couple of days now.
You forgot to put float:left; at the slideshow div
It should be
#slideshow {
background-color: #000;
margin: 15px;
height: 95%;
width: 60%;
-moz-border-radius: 15px;
border-radius: 15px;
float: left;
}
So now you have the 'slideshow' div floating left and 'about' div floating right and they can fit inside the parent div.
Basically they were inside the parent div from the first time but the about div was under slideshow div.
Demo:
http://jsfiddle.net/QLbGc/2/
If you're looking to have the two divs side by side here's a fiddle for that.
http://jsfiddle.net/Hastig/QLbGc/6/
I stripped out a bunch of stuff as I wasn't sure you needed it or it was just stuff you were throwing at it to try and affect change.
Somebody mentioned you were missing a float: left; in what we assume you wanted as your left div.
Remember to compensate for margin and padding to match the container div.
In my example the main container was 500px wide. If I set each float div to 250px width when added to the 20px combined margins on those divs the total width goes to 520px and pushes that right div under the left div so you'll want each floated div at 240px to compensate. Same deal with percentages.
If I misundestood your intention and you're looking to hide one of those div use display: none; on it and double the width of the one you want to show.
try to put this code in your css.
.content::-webkit-scrollbar {
display: none;
}
I currently have two side-by-side divs, each set to the width of the page so that I can scroll sideways. The right-hand div needs to peek exactly 40px over into the left side so it's visible on page-load. I've managed (with a lot of help) to get that part fine - the issue now is that there is a 40px gap between the edge of the right-hand div and the edge of the page - illustrated below:
jsFiddle
Any ideas on how to get rid of it? Thanks a lot for any help. The 'peek' area has to stay exactly 40px, so using percentages seems to be an issue. Oh, and for an example of how this would look in vertical form, here's an example.
Cheers.
You're container has 200% width and is causing the expanding problem.
You need to reduce its size. It's a bit difficult because your width are in % and your negative offset is in px.
What you could do is change the offset to percentage and take that out of the container.
You will also need to use margin-left rather than left.
This works for me in chrome inspector:
#wrapper {
width: 199%; /* change here */
position: relative;
}
#right {
float: right;
width: 50%;
background-color:cyan;
position: relative;
margin-left: -1%; /* and here */
}
Fiddle: http://jsfiddle.net/hUyBq/
*Edit: * 1% is an example, you might want more. update the wrapper accordingly
*Edit: * Solution using JS: http://jsfiddle.net/bendog/wP4zb/
Could you fake it like this jsFiddle example?
I moved the scroll right block (<p>scroll right --></p>) outside of the wrapper (you didn't mention if that needed to be there). Then I applied the same color to the wrapper and added overflow:auto; to it.
I'm struggling with a client project. All of my divs have no absolute positioning, height:100% for html, body, and container divs, and yet the static-content stops short of its contents (at 910px).
I can change the overflow property to auto, and the background will continue down to the end of the content, but it adds a scroll bar, and the bottom border of the static-content div stays in the same place (at 910px).
UPDATE: Development link was no longer valid, so I removed it. Suffice to say that Animuson's thorough explanation is the valuable part of this thread, and solved the problem of containers not expanding to match their content. – Ty
You used the wrong overflow-y property for clearing, and you should set a min-height instead of a regular height. Try this:
#static-content {
background-color: #FFFFFF;
margin: 0 auto;
min-height: 100%; /* Set to minimum height so overflow doesn't get hidden */
overflow-y: hidden; /* HIDE overflow; I know, it doesn't make much sense */
position: relative;
width: 960px;
}
Floating Content by Itself
Given this green box which has a padding of 20px (for visibility), notice how a single red box floated to the left will expand past the boundary of its parent box. This is because floating content doesn't actually take up any "space" in the visual area. All other elements will expand underneath it, and only text will wrap around it.
Clearing Floated Content in the Parent
In order to counter this and make the green box completely encompass the area of its child red box, we can add overflow: hidden to its styles. This will expand the box down far enough.
Expanding the Parent to 100% Height
You might think that just adding height: 100% is the simplest way to make it expand to where it needs to be.However, the height property specifies an absolute height. Since the content which is floated does not actually take up any vertical space, our overflow: hidden property will cut off all the content that goes past the parent's height.
Using a Minimum Height Instead
Since we want it to expand to at least a 100% height, we can use the min-height property to force it there and still maintain the "automatic" height needed to make the parent green box fully encompass the child red box, letting it push past the 100% only when it needs too.
How You Were Set Up
All elements, by default, are set to overflow: visible so that property didn't really change anything. The only difference you had between this and the first example I provided was that you had a height: 100% set on the element. So the parent was expanding to 100% height but still not encompassing the full height of its child red box.
If you have to use overflow:visible for some reason, there's other way to force container to stretch to contain all floated content. You have to put element with clear:both as a last container's elements. If you ignore ancient IEs (<8) you can do it with very simple css (vide https://css-tricks.com/snippets/css/clear-fix/):
.your-container:after {
content: "";
display: table;
clear: both;
}
If height: 100% doesn't work well for you, you can try this calc function from CSS3:
/* Firefox */
height: -moz-calc(100%);
/* WebKit */
height: -webkit-calc(100%);
/* Standard */
height: calc(100%);
You can try this either with height, or with min-height, as already said. You can with this calc functions also other calculations like:
height: -moz-calc(100% - 50px);
And this is sometimes very useful, as you might guess.
height:100% is the height of the content that flows with your container at hand and is not taking into account your floated content, so that is why the height of your container is stopping short. Remove it and clear your container properly to clear your floated elements within and it will work:
#static-content:before, #static-content:aftr {
display:table;
content:"";
}
#static-content:after {
clear:both;
}
#static-content {
zoom:1; /*ie fix*/
}
You have a float in static-maincontent, which removes it from the regular flow of the content of the document, and hence static-content doesn't care about its height any more, and so won't expand to cover it.
Additionally, remove height:100% for static-content.
READ FOR ANSWER!!!-- Okay so I had the same problem, All that was needed was to remove the "Positioning" Style. Should work perfectly fine.
Newbie question here. I have a #wrapper as my main container. Like so:
#wrapper {
margin: 0 auto;
padding: 0 20px;
width: 960px;
height: 100px;
}
My question is: what is the actual width of the wrapper now? 960px or 1000px? Let's say I want to have a #header inside the #wrapper. What should the width of my #header be, assuming I want it to be the width of the #wrapper?
The width of the wrapper in your example is now 1000px. Padding is added to the width, wheras Margin is not.
If you put a header inside the wrapper, you would want it to be 1000px to stretch entirely from side to side, but that would be impossible because of the padding, so your header would still have to be 960px.
Heres a JSFiddle (Sorry, just discovered this today!)
http://jsfiddle.net/wGYfR/8/
The outer width is 1000px and the inner width is 960px. So if you want to put inside the wrapper it should have width <= 960px
The wrapper is still 960px. However, you have added padding of 20px on both sides meaning for 20px on both sides there will be only white space. The usable area is now 920px.
You don't have to set the width of the header. If you don't it will fill the whole wrapper element (minus the padding). You header will end up being 920px.
I suggest firebug This will help you so much. Seriously.
The actual width would still be 1000px. You can set a background color on your #wrapper to see that the width will still be 1000px.
CSS Box Model Illustration http://img405.imageshack.us/img405/3402/boxmodel.png
If you use Chrome or Safari (or firebug with Firefox for that matter) you can easily check out the width of an element, and how padding and margin in affecting it.
The width should be 960px, however only FireFox adds the padding to the width.
To fix this, put the following code on top (or at least above all div selectors) of your code:
DIV { /*let Firefox stick to the web standard concerning padding*/
-moz-box-sizing:border-box;
box-sizing:border-box;
margin:0;
padding:0;
}
I have a layout template made to have a top banner, a left side menu and a content area to the right of the menu. I'm trying to figure out how to keep the 'application_layout_content' div from dropping below the 'application_layout_menu' if the browser window is narrowed. I'm not sure if I was doing this the right way to begin with; otherwise it seems to work fine.
(looking at IE7/IE8 mainly), I've played around with 'overflow' and 'position' properties but either will cause problems in one version or the other. Like 'Overflow: auto' will work in IE7 (main content div won't drop below the menu div), but in IE8 it will cause a greyed out vertical scrollbar and the main content div will still drop below the menu div.
Thanks!
#application_layout_header
{
background-image: url('../hHeader.jpg');
background-repeat: no-repeat;
height: 103px;
}
#application_layout_menu
{
width: 205px;
float: left;
}
#application_layout_content
{
float: left;
}
I don't think you can accomplish this as long as you have a fixed width defined for #application_layout_menu. Try making it a percentage value.
try setting a min-width on #application_layout_header