I'm trying to make a design for my homepage, where i have a top with banner and menu, a bottom and a contentarea which is made of three divs that is next to each other.
I want different stuff in the left one or only use this as a spacer.
The right column will have some banners in it for non-profit commercials.
The middle column will have lots of content and this content can be very long or short and i want this content to only be in this column and not float to the sides and therefore i need the design to be somewhat dynamic on heights. What is really the problem is that my container wont move with that extended content in the middle...
Edit:
I have updated the example so it more clearly shows whats i want.
I want all content in the middle region and some other stuff to the left and right and this stuff in the middle can get very long therefore i want that the middle column shall decide on how long the container has to be - if that is possible? If i make the container move, then the left and right column will move with it.
I'm sorry, my english is very limited.
<!DOCTYPE html>
<html>
<head>
<style>
html
{
height:100%;
}
body
{
height:100%;
background-color:green;
}
.container
{
height:90%;
background-color:blue;
}
.left
{
width:150px;
height:90%;
float:left;
border: 2px solid #242F24;
margin:auto 5px 5px 5px;
padding:5px 5px 5px 5px;
background-color:yellow;
}
.right
{
width:200px;
height:90%;
float:right;
border: 2px solid #242F24;
margin: auto 5px 5px 5px;
padding:5px 5px 5px 5px;
background-color:grey;
}
.middle
{
width: auto;
background-color: red;
float: none;
margin:auto 5px 5px 5px;
padding:5px 5px 5px 5px;
height:auto;
}
</style>
</head>
<body>
<div class="container">
<div class="left">Left<br>Lorem Ipsum.....</div>
<div class="right">Right<br>Lorem Ipsum.....</div>
<div class="middle">Middle<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</body>
</html>
Try using an actual height instead of a min-height.
height can be controlled using overflow.
min-height allows the container to grow to the size of the content.
Related
I have the following code:
.my_button {
background-color:white;
width:100%;
text-align:justify;
border-style:solid;
}
.my_button:after {
content:'X';
float:right;
font-size:30px;
}
<button class="my_button">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</button>
You see the big X is below the text.
But I'd like to have the X vertical aligned on the right side and the text on the left.
Just like this example:
How can I do that? I tried with margin, padding, width but none of them is working.
You can do this by using flexbox:
.my_button {
background-color:white;
width:100%;
text-align:justify;
border-style:solid;
display: flex;
}
.my_button:after {
content:'X';
font-size:30px;
align-self: center;
margin-left: auto;
padding-left: 10px;
}
<button class="my_button">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</button>
<button class="my_button">Lorem ipsum.</button>
Just add display: flex and align-items: center to your button. Display flex changes the flow of the elements to be in line with each other. Then aligning the items center will center your X.
.my_button {
background-color:white;
width:100%;
text-align:justify;
border-style:solid;
display: flex;
align-items: center;
justify-content: space-between;
}
.my_button:after {
content:'X';
font-size:30px;
}
<button class="my_button">Lorem ipsum </button>
Thanks to #daggett and #dantheman for their help but I ended up with another solution.
Problem is, that display: flex; causes many problem if I e.g. have an <u></u> in the text. There will be missing spaces as well as huge spaces.
I'm now using this code:
.my_button {
background-color:white;
width:100%;
text-align:justify;
border-style:solid;
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAAPUlEQVRIiWNgGFHAqlH2v1Wj7H9S9DDRyjGjFoxaMIQsYIQxSM1AhMCx+seMDAx08AFJYLSoGLVg1IKRCgAjdwuA1z8x5AAAAABJRU5ErkJggg==');
background-repeat:no-repeat;
background-position:calc(100% - 15px) center;
background-size: 10px 10px;
padding-right:40px;
}
<button class="my_button">Lorem ipsum <u>dolor</u> sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</button>
<button class="my_button">Lorem ipsum <u>dolor</u> sit amet.</button>
This is working perfectly, no matter if the text is very long or rather short or if there's an <u></u> inside the text.
This question already has an answer here:
fixed position header overlapping
(1 answer)
Closed 3 years ago.
Ok so first things first. I have a navigation bar at the top of my page, and I've set it's position property to fixed so that it stays on screen all the time.
The problem is that as soon as i did that the div below it shifted upwards going underneeth the nav element.
I have searched about this topic and found only solutions that involved setting the position property of the above div as relative. But doing so the navigation bar doesn't stay there, it moves with the rest of the page when scrolling down.
This is the code:
* {
padding: 0;
margin: 0;
}
.nav-bar {
position: fixed;
overflow: hidden;
width: 90%;
height: 30px;
background: #006666;
z-index: 1;
color: #fff;
}
.content {
position: relative;
background: #aaa;
color: #fff;
}
<body>
<nav class="nav-bar">Navigation bar</nav>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.</div>
</body>
I've tried different combinations of positions of both elements but none of them worked as i wanted.
Here is the fiddle: https://jsfiddle.net/e1nbxj8v/
Add padding-top:30px of .content
.content {
position: relative;
background: #aaa;
color: #fff;
padding-top:30px;
}
https://jsfiddle.net/lalji1051/yafeu1x7/
Have you consider adding margin-top: 30px; to content and nav making top: 0; ?
https://jsfiddle.net/dv7pyh92/1/
I recommend you rather use a very simple CSS grid:
grid-template-rows: 30px calc(100vh - 30px);
* {
padding: 0;
margin: 0;
}
.nav-bar {
width: 90%;
height: 100%;
background: #006666;
color: #fff;
}
.content {
background: #aaa;
color: #fff;
height: 100%;
overflow: auto;
}
body {
display: grid;
grid-template-rows: 30px calc(100vh - 30px);
}
<body>
<nav class="nav-bar">Navigation bar</nav>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.</div>
</body>
Hi I am trying to have a cover photo fill the entire page, BUT not have it fixed. I would like it so that once you start scrolling the cover photo scrolls and content shows. I have set the height parameters to 900 ish to fit most screens but I am looking for a way to has it cover all browsers/resolutions. Also the cover photo does not show up properly in EI. It is extremely zoomed in.
HTML
<body>
<div id="container">
<div id="header">
</div>
</div>
CSS
body{
margin:0;
background:#F9F9F9;
/*This is to cut off the white border around the webpage*/
}
#container {
position: relative;
min-width: 1366px;
max-width: 2048px;
margin: 0px auto;
width: 100%;
}
#header {
background: url('../images/cover6.jpg') no-repeat;
background-size:100% 100%;
width: 100%;
margin:0px auto;
height: 950px;
}
One IE9+ solution that could work for you is to use background-size:cover; which generally has good compatibility. You would need to adapt your styles to use percentages instead, but cover does a good job of keeping the entire container showing an image. Here's your code adapted to use this method
html, body {
height: 100%;
margin:0;
}
#container {
position: relative;
height: 100%;
}
#header {
background: url('//placehold.it/2000x1000') no-repeat center;
background-size: cover;
height: 100%;
}
<div id="container">
<div id="header">
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
This is some extra text<br/>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
This is some extra text<br/>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
This is some extra text<br/>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
This is some extra text<br/>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
This is some extra text<br/>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
This is some extra text<br/>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
This is some extra text<br/>
</div>
and a demo on jsfiddle
http://jsfiddle.net/fqe86j9c/
I have a single page site that is navigated via JS and works nearly as expected. Some of the pages are full screen (100% width and height of viewport with all content responsively fitting within this space). Some pages are text based pages that need to allow scrolling.
I need to use overflow-x:hidden on my main #wrapper as I slide various elements in from off screen and without the overflow-x:hidden it doesn't work on the Samsung Stock Browser (it works on all others just by using overflow-x:hidden on the body element but this doesn't work on Samsung Stock of course!)
You can a see a fiddle at http://jsfiddle.net/deshg/4nLoazzs/1/, if you remove the overflow-x:hidden from the #wrapper element then it all works as expected. However when you include the overflow-x:hidden on the #wrapper element (as it is now) then it causes the fixed #footer div to overlap the scrollbar. As you can see i've tried defining the #wrapper as 100% width with the #footer width set to inherit but this doesn't help either.
Can anyone explain how I can keep the same structure with overflow-x:hidden on the wrapper container but ensure the footer does not overlap the scrollbar as it's driving me nuts! Ideally I want to avoid using custom scrolls as everything else is perfect across all devices, this is the only remaining issue!
Thanks so much!
<div id="wrapper">
<div id="header">HEADER</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="footer">FOOTER</div>
</div>
body,html {
height:100%;
width:100%;
margin:0;
padding:0;
}
p {
margin:0;
padding: 0 0 1em 0;
}
#wrapper {
height:100%;
overflow-x:hidden;
width:100%;
}
#header {
height:10%;
background-color: #ffcc00;
}
#content {
height:80%;
background-color: #cc00ff;
padding-bottom:15%;
}
#footer {
position:fixed;
bottom:0;
left:0;
height:10%;
background-color: #dd00ff;
width:inherit;
}
How about putting all your content in a container (Besides header per comments):
<div id="header">
<img src="https://dl.dropboxusercontent.com/s/wypn5e7n5bgeoic/landscape.png?dl=0" alt="Image Not Available"></img>
</div>
<div id="container">
<div id="wrapper">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="footer">FOOTER</div>
</div>
</div>
Then the CSS (Change footer width:100%):
body, html {
height:100%;
width:100%;
margin:0;
padding:0;
}
p {
margin:0;
padding: 0 0 1em 0;
}
#wrapper {
height:100%;
width:100%;
overflow-x:hidden;
}
#header {
height:10%;
background-color: #ffcc00;
}
#content {
height:80%;
background-color: #cc00ff;
padding-bottom:15%;
}
#footer {
position:fixed;
bottom:0;
left:0;
height:10%;
background-color: #dd00ff;
width:100%;
}
Working JSFiddle: http://jsfiddle.net/4nLoazzs/6/ * ADDED WORKING IMAGE *
Oops wrong link * FIXED *
I've the following html code that show 1 image on left, then a text box in the middle, and an image on the right. The two images have the same size and resized to take the whole height of the screen.
This work fine on IE, Chrome but on FireFox 15, ..., 27 the image isn't completely on the right, ther is an important margin. The images are 760x1660 and the screen has less heigh thant 1660 then it's resized.
The image appear as if the image had a margin coresponding to the original with (760px) minus the resized width...
Any idea to solve this for FireFox using css?
<style type="text/css">
body {
width: 100%;
}
.left {
float: left;
height: 100%;
padding-right: 5px;
}
.right {
float: right;
height: 100%;
padding-left: 5px;
}
.content {
}
</style>
<img class="left" src="./left.jpg" />
<img class="right" src="./right.jpg" />
<div class="content">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
</div>
You can see the unwanted space on this picture http://postimg.org/image/80y7aar41/
It works fine on JSFiddle but when you put the code in a page http://www.filedropper.com/t4_1 and then resize the browser you'll see the unwated space
See my fiddle for example, it works with mine firefox and chrome
http://fiddle.jshell.net/S6qXk/4/
Don't set for a class something 100%
That is the problem you have.
Try margin: 0 and padding: 0 in the .right and .left classes.
the answer to your question is right in front of you ;)
just change the width of your "body tag"
body {
width: 100%; /*change it to 99% - and everything seems to run just fine in all my browsers, IE, Firefox, opera, chrome*/
}
css
body {
width: 99%;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.left {
float: left;
height: 100%;
}
.right {
position:relative;
float: right;
height: 100%;
}
#left_image {
float: left;
height: 100%;
width:15%;
}
#right_image {
position:relative;
float: right;
height: 100%;
width:15%;
}
#center_div {
float: left;
height: 100%;
text-align:left;
width:68%;
padding:15;
}
html:
<div id="left_image"><img class="left" src="http://www.hellopro.fr/images/produit-2/0/2/0/pompe-a-entrainement-magnetique-verticale-non-metallique-334020.jpg" /></div>
<div id="right_image"><img class="right" src="http://www.hellopro.fr/images/produit-2/0/2/0/pompe-a-entrainement-magnetique-verticale-non-metallique-334020.jpg" /></div>
<div id="center_div">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
</div>