I have a page with a wrapper div which contains a background image and all the content divs.
In this wrapper div I also have a logo div which should be placed at the bottom left corner of the wrapper without interfering with the contents.
I have managed to place the logo in the bottom left corner of the whole page (position: absolute; bottom: 0; left: 0;) The problem is that if you resize the width of the window, the background stays centered while the logo div goes left and sticks to the browser edge (as it should).
How would I go about making it stay to the edge of the wrapper div?
The reason it is not a part of the background is that the client wanted to be able to change the background without editing in the logo.
I have thought about not centering the wrapper, this would solve the problem.
I'm thinking about position: relative, but it doesn't seem to work.
I hope I'm clear enough, here is a link to the layout in case it helps.
http://development.pulsemedia.se/current/kingromeo/layout/
Make your wrapper div's position to be relative.
At the moment, your bandname div is not inside the wrapper. Put it in the #wrapper div, and set the wrapper to a position: relative;
I found my mistake. I had forgot to make the background-div fixed width so when the browser windows expanded, the background-div expanded too. Everything was behaving exactly as it should.
Put the logo div inside the wrapper div, and then set use some combination of these:
position: relative;
bottom: 0px;
float: bottom;
I'm not sure about the float: bottom, but I think you'll need it to prevent interference with the rest of your content.
Related
When I resize the browser window my navigation bar div drops below the search box div.
How can I stop the nav bar moving and keep it in the same place? The footer behaves itself and its structured in the same way?
Here's a link...
http://www.signport.co.uk/test/asg_template3.html
Thanks!
This happens because your menu does not have a width specified. Whereas you footer behaves because it has a width specified( div with id footerleft)
I'm testing on Chrome now, removing the width:100% you have set on the navigation bar div (wrapper_menu_full class) seems to do the trick. This 100% refers to its size compared to the containing div (#mainmenu3).
If this still doesn't work on IE7, try setting both divs inside #mainmenu3 to display:inline, although now I'm testing on Chrome it doesn't seem to make any difference.
REPLACE YOUR CSS
#mainmenu3 {
height: 150px;
line-height: 20px;
list-style-type: none;
overflow: hidden;
width: 100%;
}
YOU WILL GET THE DESIRE OUTPUT
You're using floated elements on both divs (searchfilter and menu).
When you are using the floated elements, and the width of the last of the floated element exceed parent's width, it goes moves to the next line (belov).
Put this into your css to make it work as you want:
#mainmenu3{position:relative;}
#search4{position:absolute;top:0;left:0;}
.wrapper_menu{position:relative;top:0;left:310px;}
My basic layout is a couple of divs within a div - http://jsfiddle.net/nxPhy/ - I'm looking for a css way to have the const div always visible regardless of any horizontal scrolling of the parent div (so only the content div is actually scrolled).
Add position: relative; to container, and remove floats and add position: fixed; to the block you want to fixate.
Result:
http://jsfiddle.net/nxPhy/1/
You want to add:
position:fixed
to the div that you want fixed. Doing this will position this div and it's containing elements fixed.
I want to create a page with a horizontal centered content block that reaches from teh top to the bottom of the browser window. I already figured out that tables are not the right way to design a layout. A block that reaches from top to bottom is not the problem:
<div style="position:absolute;top:0px;width:800px;height:100%;background-color: #fff;">
</div>
But I'm not able to make this Div centered. I tried
"margin:auto"
But no effect. Th centers the text in the Div, but not the Div itself on th screen.
To center a div you need two things, a width, and automatic horizontal margins. Like this:
#myDiv {
width:800px; /* or whatever */
margin:0 auto;
}
There is no need for absolute positioning, just these two rules will do the trick.
to center an Absolutely Positioned div add left: 50%; margin-left: -400px;
where the negative margin value is half the width of the div
Try not to use position:absolute for layouts unless necessary. This sample shows best practice for horizontally centering your content.
If you need a solution that will continuously work to restrain the content area height within the viewable area, try my jQuery solution: http://jsfiddle.net/BumbleB2na/Z75hA/
I have a weird CSS problem. I have a banner that I need to position at the bottom of every page.
To this end I have set body to position: relative; and my banner to position absolute; bottom: 0px;
The problem is my banner positions differently on different pages such as the following:
http://www.plotsandhouses.com/node/1,
http://www.plotsandhouses.com/node/29,
http://www.plotsandhouses.com/node/30
The 'custom-page_closure_wrapper' div is what I am trying to position at the bottom of the pages. I can do this by setting position: fixed; but I don't really want the div visible at all times - only when the bottom of the page is visible or the user scrolls down to see it.
What am I missing?
To add on to Marc's answer, there is a CSS solution to it called the Sticky Footer.
The reason why your footer doesn't "stick" to the bottom of the page is because the height of the container where the footer is absolutely positioned in is not more than the height of the viewport. Therefore, by forcibly stretching the container to the full height, the technique ensures that the footer always stays at the bottom.
You can try adding the following in your CSS file:
body {height:100%;}
#custom-body-wrapper {height:100%;} /*this is the container of your absolute div*/
and removing the position:relative on your body tag.
i have a problem with the entire content of my page.
The problem being without a scrollbar present my content is about 20px to the right, but when a scrollbar is present it shifts to the left.
I have to compensate for this for an absolute postioned div by positioning it over the content by 20px until a scrollbar is present as it rests at the right hand side of the page.
This is a crappy fault on my behalf but i just want an easy way to fix this. Any quick and easy suggestions? Would i be better off making the main content div an absolute one?
One quick and dirty way is to always force the scrollbar to be visible with:
html { overflow-y: scroll; }
Not ideal, but it standardizes the appearance if the lack of scrollbar offset is breaking your design.
If I'm understanding your problem correctly, your absolute div is 20px off when a scrollbar is present? If that is the case what you can do is set a parent div that wraps around your content and absolute div.
Be sure to set this wrapper div to position: relative; so now your absolute div will be positioned inside the relative div instead of the document level. If there is a scrollbar, the wrapper div will be offset to the left by 20px (the width of the scrollbar) and the absolute div will also.
<div class="wrapper">
your content goes here
<div class="absoluteDiv"></div>
</div>
.wrapper { position: relative; }
.absoluteDiv { position: absolute; }
I don't think your content is actually shifting in any sort of buggy way; it's just that the presence of the scroll bar makes the viewport narrower. If you're using a layout that depends on viewport width (e.g. fluid layout, or fixed-width with centered content), this will cause everything to move by half the width of the scroll bar when it appears.
AFAIK, there's no sure-fire way to compensate for that, since the width of the scroll bar isn't known.