I'm trying to get a dynamically sized sidebar to float in the upper right portion of my web pages (but below the header and nav) and have the main content on the page flow around it (sort of in an "L" shape except with the bottom part of the "L" really thick). The width and height of the sidebar will vary from page to page so I can't use any hard values.
My css looks like:
#main {
width: 850px;
height: auto;
}
#sidebar {
width: auto;
float: right;
}
(plus some padding, margin, and background color code I think is inconsequential)
My html looks like:
<div id="wrapper">
<div id="header"> /* header stuff */ </div>
<div id="nav"> /* nav stuff */ </div>
<div id="sidebar">
/* my sidebar content, really just an h3 and a ul */
</div>
<div id="main">
/* lots of content here */
</div>
</div>
I don't completely understand why I have to have the sidebar div first, but it this code works fine in FF, Chrome, Safari (Windows), and IE8. But on IE7 (and IE6, which I don't care about), the main content gets pushed down below the bottom of the sidebar, as if there was a "clear: left" on the sidebar div (but there isn't).
I have a feeling this is one of those evil IE7 non-compliance bugs, especially because IE8 behaves exactly like the other browsers. But I have no idea how to fix it.
Any ideas? TIA.
First, make sure you are using a doctype that will put IE7 into strict mode (see http://hsivonen.iki.fi/doctype/ for an explaination). if that doesn't do it, it may be that you need some play in your margin widths.
The reason why you have to have the sidebar div first, is since div is a displayed as a block element anything after it, will be below it (unless you float the main div).
By floating the sidebar div and putting it first, the browser knows it can display the main div to the right of the sidebar. You could get a similar effect by adding float left to the main div and removing the float from the sidebar div and moving it after the main div.
From what you describe, it sounds like your sidebar is behaving as if it was a block element. Maybe try some different display options like inline-block. I'd also try experimenting with the width min-width attributes. Hard to say though.
Bingo! Fixed! The guys who mentioned playing around with widths and margins get the gold stars tonight. It turned out that all I had to do was remove the fixed width on the main div, then add some padding on the right to create a gutter for text and images. Tested and confirmed in FF3, Chrome, Safari (Win), and most importantly, IE6 & IE7 (even though I still hate IE).
I guess the IE rendering engine was saying, "I see that you want your main div to be 850px wide, but with that sidebar you stuck up there, I don't have room so I'll have to shove it underneath the sidebar". Of course, every other browser's rendering engine said, "Dude, I totally get what you're trying to do! No problem, I'll lay out everything exactly as you'd like it."
Related
I have an absolutely positioned form that appears roughly 200px below where it should be on the page load. If I open up Chrome Dev Tools and disable and re-enable any CSS image it goes where it should be.
This only happens in Google Chrome.
I've tried using the chrome specific CSS rules below but it doesn't work.
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
How can I fix this?
Here is the page in question: http://info.iconixx.com/Iconixx-Incentives_imc_incentives1.html
It's likely nested in a different element then your wanting it to be. Make note of the parent element.
Find the element in which that header image is coming from. Likely <header></header>
Then make sure that element is defined as position: relative;
Within those tags have the relevant mark-up of the element you are trying to position within this area.
<header>
<div id="absoluteelement">
</div>
</header>
Now when you do:
#absoluteelement {
position:absolute;
top:50px;
left: 200px;
// more
}
It will be positioned top and left coordinates from the parent element, so top and left from the top and side of <header> just double check your code and nesting. Also, make sure you have all widths and heights defined for that area. Hope this helps.
I think you should really take a look how your markup is structured and consider reformatting it. For 1 the left box in the banner comes after the Form which is on the right. Just like anything else you should build left to right.
<div id="banner">
<div id="left_content"></div>
<div id="right_form"></div>
</div>
You could then....
#left_content{ float:left; }
#right_form{ float:right; }
This isn't going to give you the exact look you want... but using this approach will really help eliminate thse types of issues to begin with.
How do i go about setting up a full height side bar using a responsive grid system, that is similar to bootstrap?
The issues I am running it to is the .main wrapper div collapses to the height of the .primarycol div.
I 'm using pull and push classes to adjust the visual layout so the .secondarycol div looks like its on the left hand side, even though it is after the .primarycol div in the code.
<div id="main" class="main content">
<div class="row">
<div id="primarycolumn" class="primarycol col12 col9-768 col3-768-push" role="main"></div>
<div id="secondary" class="secondarycol col12 col3-768 col9-768-pull col7-1024-pull" role="complementary"></div>
</div>
</div>
Normally the without the .secondarycol` class, the div would and look like this.
I have tried adding min-height:100% to the .main div and height:100% to the body tag, but that makes the main div height only ever be the height of the browser window and not the content.
Any suggestions on how I can remedy this would be really welcome.
This is the codepen of my base structure.
http://codepen.io/onebitrocket/pen/ZYQLMm/
I've added in the third column as well as some pages require one.
The column system is based on bootstraps, but i think it's an improved version:
The column classes are declared from smallest size to largest size.
I've also changed the class names to indicate the breakpoint size rather then xs,sm,md,lr etc..
Thanks
At least on chrome you need to set the height on the html tag too. Try it - http://jsfiddle.net/27kze60s/
html, body { height: 100%; }
Fixed, thanks to everyone for the suggestions
I've added the following to the css
height:100% to body
min-height:100% to .main
overflow:-y: auto to .secondarycol
I've updated the codepen - http://codepen.io/onebitrocket/pen/ZYQLMm/
so I have containers set up like so:
<div>
<div class="left"></div>
<div class="right"></div>
</div>
The left div is the login, the right div is the content...
With media queries, when the browser gets small enough I want the left(login) section to go on the bottom of the right(content) div.
I tried using table-header-group on the .right div and table-footer-group on the .left, and it works on the desktop browser perfectly in FF...however in chrome, safari and IE...including iphone and android phone it doesnt work at all.
My entire layout is based around needing this first div to be below the second one for the mobile layout...is this possible at all or do I have to redo the entire structure of the site?
ex. http://jsfiddle.net/VF6Hy/1/
EDIT: If this is not possible with pure css, would there be a JS option to stack the second div above the first?
I kinda worked around the issue by adding a large min-height to the container and position:absolute to the .right div and bottom:0 on the mobile version which put it on the bottom
Apologies if this is a simple solution, but my brain doesnt seem to be working today and I just can't seem to get this to work properly.
Issue: I'm trying a new design with a 2000px header that allows for a landscape feel across the larger monitors.
However when I view the design on a smaller monitor the entire header div is moved off centre, and therefore some menus aren't available to be seen.
The content div is obviously staying at the centre of the monitor, however I cant seem to find a solution to make sure it's aligned with the centre of the header div.
I've attached an image to help explain the situation.
Just Try,
HTML
<div id="container">
<div id="header"></div>
<div id="content"></div>
</div>
CSS
#container{
width:1920px; //any other value.
margin:0 auto;
}
I would assume your css for the image is placing it top left just move that to top middle[or is it center] and you should be ok.
so background: url(...) no-repeat top center
I have a simple design. To the left is the navbar, to the right is the content div. I just did float left and float right and it works - unless the monitor is too wide. Then the navbar is far off to the left (like it should) but the content clings to the right. The middle is empty space. I want the content to cling next to the navbar on the left.
How can I accomplish this?
How about floating them both to the left and use percentage values to set their width..
Like below:
#sidebar,#content {float:left;}
#sidebar {width:25%;}
#content {width:75%}
Or if you want to fix the size of your sidebar and have the content fills the rest of the space you can do the following(I use it all the time):
HTML:
<div id="content"><div class="in">
CONTENT HERE
</div></div>
<div id="sidebar">
SIDEBAR HERE
</div>
CSS:
#content,#sidebar {float:left;}
#sidebar {width:300px; position:relative;/*so content won't cover it*/}
#content {width:100%; margin-right:-300px;/*sidebar's width*/}
#content .in {margin-right:300px;
/*sidebar's width or more for space between blocks*/}
There are lots of method to do that.
It depends :
if you want a fixed width layout, or a relative one.
if you want the layout to be centered or not.
etc.
A sketch of what you want or/and your actual code would help.
Anyway, if you're not aware of CSS layout, you could use a CSS framework like blueprint which is easy to use and takes care of your current problem by itself.