The best example I can find of what I'm trying to achieve with my current website project is the amazon homepage.
I want the width of a banner on my page to be 100% of the browser width, but I don't need it to resize when the window is resized. In addition, I would like the entire page to not resize and instead cut off/have scroll bars.
The banner is located at the top of the page, has a hi-res image as the background, and contains my nav bar as well as some text.
What would be the best method to set the size of my percentage based divs relative to screen resolution? Is there a way to set the size of my images without using percentages for size? (div width = screen width).
I'm having issues with divs containing text not resizing correctly, the text gets jumbled when the browser is resized. I'm using html5 and css with dreamweaver cs6.
I think this is what you want.
The header re-sizes but the content stays at a fixed size when page resizes:
https://jsfiddle.net/DIRTY_SMITH/zopnqxry/4/
<div class="header">
</div>
<div class="body">
<div class="left">
</div>
<div class="right">
</div>
</div>
CSS
body{margin: 0; overflow: scroll}
.header{width: 100%; height: 50px; background-color: lightblue;}
.body{width: 400px; height: 600px; background-color: lightgreen; margin-left: auto; margin-right: auto;}
.left, .right{width: 50%; height: 200px; float: left;}
.left{background-color: blue;}
.right{background-color: red;}
Related
I'm trying to fit a fixed background image properly into a div.
I want the image to
have its left edge be positioned on the divs left edge, even if the div is positioned with margin auto
have a width of exactly the divs size
Both points are problematic.
100% background-size seems to relate to the images original size and not to the div-size. Maybe contain is the correct thing here, but I can't verify that without a solution to problem no 2.
The background-position seems to relate to the complete browser viewport and not to the div.
I have made the image have a proper dimension, so that it should be high enough to cover the visible area when being scrolled over.
Here is a jfiddle: https://jsfiddle.net/417u343f/3/
As you can see, the image is starting more to the left than the start of the div and because of that, it's repeating before the div is at its end.
Thanks for any help, I hope I made my problem clear enough.
<div class="outer">
<div class="test">
<div class="test1">
</div>
<div class="test2">
Text...
</div>
</div>
</div>
css:
div.test {
width: 80%;
margin-left: auto;
margin-right: auto;
height: 250px;
}
div.test1 {
width: 50%;
height:100%;
float:left;
background-image: url('image...');
background-attachment: fixed;
background-size: contain;
}
div.test2 {
width:50%;
float:left;
}
I have been banging my head against the wall trying to figure out this problem and I have looked high and low for the answer and came up with similar results.
Synopsis
The problem is that I am building a website using the 960 grid and have three columns that I want to stretch at 100% at all times. Here is a fiddle for your reference: http://jsfiddle.net/Uec7h/1/
Essentially the html is like so:
<div class="contentWrapper">
<div class="container_12">
<div class="grid_2 leftSide clearfix">
Left sidebar content.
</div>
<div class="grid_7 content">
Lots of content loaded from the server.
</div>
<div class="grid_3 rightSide">
Right sidebar content.
</div>
</div>
</div>
with the CSS being like
html, body {
height: 100%;
}
.content {
height: 100%;
}
.leftSide {
height: 100%;
background-color: #000000;
}
.rightSide {
height: 100%;
background-color: #000000;
}
.contentWrapper {
height: 100%;
}
The fiddle isn't completely accurate to what I am seeing on my local version, but it's close. Seems like the left and right sidebars do not want to expand to 100% no matter what I do.
What I've Tried
Most of the answers I have found on SO have suggested to put height: 100% on the html, body elements and everything should work out fine. Adding this attribute and giving both sidebars height: 100% did work a little bit, but if the content in the middle column gets too big, it stops at a certain point and won't continue to stretch.
I have tried adding the clearfix class that comes with the 960 grid but it didn't seem to help at all.
Question
How do I get the left and right side bars height in the fiddle to be 100% no matter what content is in the middle column?
If you add the following CSS to the sidebar elements it will fill the 100% of the height.
display:block;
height:auto;
position:absolute;
top:0px;
bottom:0px;
If you place the sidebar into a wrapper div with relative positioning, the content section will be again in it's right place...
I would also set padding and margin to 0 for the body.
EDIT:
If you add height: 100% to the .container_12 it will get a real height, and children elements can have a 100% height. Notice that the sidebars will be as height as the window itself, but your content at the middle can be taller than 100%... Fiddle
Dont know the 960 grid, the EDITED solution - using visibility: visible; -
HTML
<div id="box">
<div class="vision"> sdfsdfsd </div>
</div>
CSS
#box {
float: left;
border: 2px solid red;
}
.vision {
width: 300px;
height: 600px;
visibility: visible;
}
I have a layout where I need to use height: 100% on html and body (and any wrapper divs I resort to using) to achieve an effect similar to pages, so that the content on my first "page" is centred, scrolling down the content on the second "page" is centred etc.
The html looks like this:
<section class="page" id="p01">
<div class="spacer">
</div>
<div class="outer">
<div class="inner">
Some content
</div>
<div class="inner">
Some content
</div>
</div>
</section>
<section class="page" id="p02">
<div class="spacer">
</div>
<div class="outer">
<div class="inner">
Some content
</div>
<div class="inner">
Some content
</div>
</div>
</section>
and the vertical centring etc. achieved with this styling:
body, .page {height: 100%; margin: 0 auto;}
.spacer {
float: left;
height: 50%;
margin-bottom: -150px;
}
.outer {
height: 300px;
width: 100%;
background-color: #fca;
clear: both;
position: relative;
display: block;
white-space: nowrap;
}
.inner {
width: 41%;
margin: 0 6%;
height: 300px;
background-color: green;
display: inline-block;
vertical-align: middle;
white-space: normal;
}
.inner:first-child {
margin-right: 0;
}
You can see it at work in this fiddle:
http://jsfiddle.net/terraling/3V5rV/
The problem is the body background (here I'm just using color, but on my site it will be an image) leaks out into the body margins, i.e. the body content has a max-width and should be centred with white margins.
I can fix that either by... setting html background-color to white, as per
http://jsfiddle.net/terraling/yM53t/
...but body background becomes cutoff when scrolling into the second page (that wasn't a problem in the first fiddle).
Alternatively I could set the background image on a wrapper div and not on the body. That solves the problem of it leaking into the body margins, but it still has the same problem that it is cut off on scrolling.
(see: http://jsfiddle.net/terraling/3V5rV/1/ )
Any solution that involves removing the height: 100% declaration from any of html, body or wrapper collapses the layout (including replacing with max-height: 100%).
There's a whole lot of problems with this construct and not all of them can be solved, unfortunately.
The background issue
As you have seen yourself the background of body extends to the viewport if html does not have a background. That's solvable.
The float issue
When an element floats it does not contribute to the height of its parent element. So they don't grow (e.g. body does not expand). That can be solved if you can use alternatives. For vertically centering an element you could use display: table-cell e.g., which allows you to vertically center the content.
The height issue
This is where all hope is gone. height: 100% refers to the height of the parent, of course. The parent of body is html which in turn is the child of the viewport. You gave html the size of 100% (= the size of the viewport) and body the size of 100% (= size of html = size of viewport).
So now body has a fixed height and it can't expand meaning the background doesn't expand as well. Now one might have the idea to give body no size so that it can expand. But .page has 100% too. If a parent (in this case body) has no fixed size 100% has no meaning and will be treated as auto, which means as big as the content. And the content has a height of 300px. So the .page elements wouild no longer have the height of the viewport but 300px.
As for the collapse of the CSS, you should either specify the height specifically height:200px; or add padding to the bottom/top of the page so that the content wraps. You can also use min-height:200px; then add the margin-bottom:20px; to separate the pages. I would approach this at a specific height with the wrapper having the specific background-image and bottom-margin.
In order to center your background-image to the <html> you can specify the position as 50%.
This can be done by doing background:url('yourimage.jpg') repeat 0 50%;This will ensure the background is centered.
I need to do a website with divs. See the code snippet for the format. The MENU is of variable height, depending if the menu-items is rolled out or not, and the content is of variable height as well, but with a minimum of 700px. If the MENU is folded together to its min-height, it is 300px, and the BOX should take up the remaining space so MENU+BOX is the same height as the CONTENT. The content of BOX is 600px, so when BOX only gets 400px, there should be scrollbars. When the CONTENT div expands, the BOX should expand as well, so they stay the same height.
Here's what i got so far, but it is not working properly. I've tried some other stuff, but deleted it for this post so I only get the points shown instead. Hope you can help, and thank you in advance!
#container{ width: 800px; }
#leftbar{ float: left; width: 250px; background-color: lightgray; }
#content { float: left; width: 550px; background-color: white; }
#menu { width: 250px; }
#box { width: 250px; height: 300px; overflow-y: scroll; }
<div id="container">
<div id="leftbar">
<div id="menu">
<div id="box">
</div>
<div id="content"></div>
</div>
<div style="clear:both;"></div>
hi at the first look i can see you have some unclosed div tags, and probably that's why it doesn't do what you want. You can assign scroll bars by using java script, if you set overflow from the css it will have a scroll bar from the beginning
I'm working on a website that uses an older vBulletin message forum. The current setup works fine for the most part, however, when I open the forum in my mobile device, I see the ad banner (728x90) overlapping the logo image and it just looks bad. It gets even messier when looking at the banner css positioning because the top and right portions fit the needs of the rest of the layout.
My basic question is how can I redo this so that the banner doesn't EVER overlap the logo image while still holding the necessary offsets to fit the rest of the layout?
#container{
width: 100%;
height: 100px;
}
#logo{
width:230px;
height: 63px;
}
#advertisement{
height: 90px;
width: 728px;
position: absolute;
right:10px;
top: 7.5px;
}
<div id="container">
<div id="logo"><img src="logo.jpg" border="0" alt="Whatever" /></div>
<div id="advertisement"></div>
</div>
** Not my CSS or HTML
I would give #container the property "min-width: 958", and keep the width of 100%.
That way, the page will always be wide enough for both the logo and the advertisement.