I have this site where I need to place two images at the top of the page on each side of the content. Temporarily it can be reached [removed].
If your resolution is wide enough you can see both right and left red Christmas decorations are aligned to the main content. However the right ones are not taken out of the page flow and create a horizontal scrollbar if the browser is smaller than ~1300px across.
I achieved the two ornaments by placing two absolutely positioned divs with backgrounds into a relatively positioned div:
<div id="alignment"> <!-- position:relative -->
<div></div> <!-- first image: position:absolute;right:-210px -->
<div></div> <!-- second one: position:absolute;right:915px -->
</div>
Although absolutely positioned elements should be taken out of the document flow, the second image isn't :( Thus, the bottom scrollbar appears.
What I tried:
making an image of both ornaments with 910px (the width of the content) of empty space apart and using only one absolute div instead of two: same issue
adding the aforementioned image to be the no-repeat top center background of <html> which resulted in only one background showing. Either I have the snowflakes on the body bg or the red ornaments over a solid white background. The latter depends on which of the two (body or html) elements have which image as the background.
placing image divs in an absolute div and making the two relative (opposite of current situation) - same issue AND does not display on <IE8
I know and am sorry for this is a big issue and hard to understand. I researched a lot and am out of ideas. Any possible solution to try out would be greatly appreciated. Also, I realize the coding of the site i linked to is on the verge of terrible, but I have just started working on it, so no comments on that, please :)
The solution in the end was to create a div that opens right after body and encases all content, closing right before body does. The style of the div:
background: url('/client/images/xmas-burbulai.png') no-repeat top center;
The png itself is the two decorations I wanted to be on each side of the body. Both pictures were pasted into one with a 910px empty gap between - the exact width of the body.
No scrollbar, crossbrowser, stylish.
try setting this div (#alignmen) with:
overflow: hidden;
Update:
<div id="main"> //Position this relatively
<div> //Positon this absolutely, this height should be the max of the two floated divs
//In here
<div>Left</div>//Float Left
<div>Right</div>//Float Right
</div>
<div>
Related
I'm trying to add some decorative flourishes on a page footer with :after pseudo-element.
The problem is that depending on my css code the decorative flourish element(fixed size, uses background image) either gets clipped by the footer or ends up extending the page height and adds vertical scroll bars.
What I need is the decorative element to start at the footer top border(in other words where the page content ends) and clip at page bottom(or if screen space allows, don't clip at all).
I'm able to provide a link to the code later if my question isn't clear enough.
EDIT: In other words, I'd like to know if there is any sane way to prevent vertical scrollbars from appearing when the bottom edge of a specific absolutely positioned element goes over the page bottom.
EDIT2: The site is currently available at http://www.ikimark.fi/ikimark_uusi/site
The decoration in question is the right bottom corner flourish image. I'm editing the site today so the code may change.
Please provide a link to your project and try using position:absolute;z-index:9999;
EDIT:
well I'm still confused about exactly what you are asking for. If you want flourish image not to cover too much space below the contents and fill up the total height of the footer only then please add overflow: hidden; at your wrap div. And if you don't want this then please can you explain?
Try setting an absolute height on the bottom div with overflow-y: hidden as follows:
<div id="footer" style="height: 4em; overflow-y: hidden"></div>
I have an issue (code is dynamic so difficult to print - I hope this is simple) whereby when a parent container div contains 3 div elements floated left, yet the if the 3rd div goes beyond the body of the page (i.e. the browser's width) it line breaks to go underneath.
I want it to float: left whatever, whether it goes past the 'end of the browser' or not. Is this possible?
Example code:-
<div id="container"><div id="divLeft"></div><div id="divCenter"></div><div id="divRight"></div></div>
Where all the divs left, center and right are float: left;
Yet #divLeft will break to go under divCenter if it's width goes outside the browser width.
Any help much appreciated!
The best way to be sure is to set a fixed width to your div here.
An example here
#container{width:306px;display:block;border:1px solid black;overflow:auto;}
#divLeft, #divCenter,#divRight{float:left;border:1px solid red;width:100px;}
Don't forget the overflow:auto on your container if you want to apply a background or a border, else it won't be under your divs.
it seems the divs don't fit in container div, and the last one floats under them. this is how float works. you must arrange the widths of them.
I am just trying to get the image box to slide up next to the BBD logo and I can't seem to figure it out.
A bit new to css and floats, etc. Can anyone offer a suggestion???
I'm working off of a template, so didn't set up the css myself.
Thanks!
link text
You will need to float both the div with the bbd logo and the div.slideshowgallery. When both siblings are floated (left for example), they will be next to each other (if the width of the containing block permits it).
A suggestion? I can give you that.
#sliderWrapper > div { float: left; }
Add this CSS and your divs will be side by side. Rounded corners and the background will break. To solve the background, add <div class="clear"></div> to the bottom of the sliderWrapper div. The rest... no idea.
always remember to work with a wrap container with a specific width otherwise is very difficult, to make this with a elastic design.
and then just float both divs... ideally on the same side and spearate them with their own margins.
I have a layout made up of several DIvs, a navbar on top, a footer dv on the bottom and a wrapper called #frame between the two to hold the content.
<div id="nav">
navbar
</div>
<div id="frame">
Content
</div>
<div id="footer">
(c) 2010 MySite.com
</div>
The content in #frame will obviously vary depending on the page, and I want to make sure that even if there's only a few lines in #frame it will fill the entire screen and ensure that #footer is always resting at the bottom of the page. Trying height:100% ends up adding vertical scrollbars because of the extra height taken up by the header and footer, and I'd definitely like to avoid this as well.
I currently am getting around the issue by making #frame's CSS height 89%, but I know this is an ugly hack and will break if I change the header and/or footer. Anyone know a more elegant way to accomplish this?
If your footer is simple like the one in the example, then you are in luck. When you know the height of the footer, either in px or em, you can absolutely position it at the bottom of the page and add the footer's height in bottom padding to #frame. If the footer is very fluid, then you will have trouble forcing it down and there is no properly elegant solution for the layout you are describing (flexbox will do it on WebKit and Gecko though; just wait until IE catches up).
I have a site I'm trying to build and I've hit one little snag that's driving me insane. Essentially, on pages without enough content to fill the viewport, I want to have the last div (my footer) fill the rest of the viewport, but it's currently being cut off.
My HTML looks like this:
<body>
<div id="header"> </div>
<div id="subNav"> </div>
<div id="content"> </div>
<div id="footer"> </div>
</body>
I tried using html, body, footer { height:100%; } but that creates much more space than needed, essentially a full screen length of blank content in the footer.
How do I get my footer just to fill the rest of the screen without adding a scroll bar?
Thanks in advance,
One Frustrated Coder.
I'm pretty sure the only way to do this is by calculating the absolute remainder hight.
I.E, with jQuery
$('#footer').height( ($(window).height() - $('#header').height() - $('#subNav').height() - $('#content').height()) + "px" );
You would want to do this on window resize to allow for a dynamically resizing window.
$(window).resize(function(){...});
I know this is 10 months late so you probably already figured something out. But here is one solution that I use.
(sorry, for some reason I can't get the code thing to work right to show you the code.) Basically wrap a div called "container", or something like that, around all other divs except the footer. The footer div will be just under the container div with all others inside the container.
Set the background color of your body style to be what you want your fill to be at the bottom. Then the background color of the container div would be what your body background color WAS. So everything down to the footer will be what you wanted the background color to be and then the body background color fills the rest of the page.
If you don't want to go the jQuery route, the poor man's version of this is giving #content a min-height that will make it work in most displays, and/or by giving your footer plenty of padding on the bottom. It might trigger a scrollbar in some instances, as you're just controlling how short the page can be, though.
(Or you can just accept it as a limitation of the medium. Stack Overflow, for example, just has its footer float above whitespace if the page is too short.)