I want to implement the following responsive layout in a webpage (HTML5 & CSS3):
All three div tags are wrapped inside a div with max-width of 960px;
I want to keep the width of "Navigation" div fixed therefore the following styles are being applied on it:
width:90px; float:left; padding:5px;
How can I make the "Contents" div occupy all remaining space without specifying its width, while keeping the layout responsive at the same time?
Thank you.
#content{
margin: 0 0 0 90px;
padding: 10px 30px;
}
Just put everything in a wrapper div and specify it's width to 960px
It depends on the browser support you want (need), with only 3 DIVs in a IE6+ way is hard (I think it's actually impossible). You're best bet is with the CSS calc method on the Content's DIV
width: calc(100% - 90px); The CSS calc method has IE9+ support so you would need to take that into account, in IE8- you would still need to use percentages.
If you are wondering how to separate the IE9+ code, then simply use #media i.e. something like this:
#media all {
#navigator {
width: 90px;
}
#content {
width: calc(100% - 90px);
}
}
#media is IE9+ compadible and because IE8- do not can't make heads or tails of it it will not affect them. So it is safe to place the IE9+ code in it.
If you can modify the HTML a bit I would advice the following:
<html>
<head>
<style type="text/css">
#h {
background: #f00;
}
#n {
background: #0f0;
width: 90px;
float: left;
}
#c_container {
background: #005;
width: 100%;
float: right;
margin: 0 0 0 -90px;
padding-left: 90px;
box-sizing: border-box;
}
#c {
background: #00f;
height: 50px;
}
#container {
max-width: 940px;
margin: 0 auto 0 auto;
}
</style>
</head>
<body>
<div id="container">
<div id="h">head</div><div id="c_container"><div id="c">cont</div></div><div id="n">nav</div>
</div>
</body>
Note how the content has a separate container, with is floated one way and the navigator is floated the other way, this is to make sure that they are not on the same plane.
the #c_container has a margin-left: -90px to bring it to the same row as the navigator and a padding-left: 90px; to make sure that #c (the new content DIV) is now visible. The #c_container also has the #c_container DIV. Without it you would need another container DIV so the width would not be affected by the padding, but that is easy enough to add, so I'll leave it up to you.
If you would use another container DIV for the content, then that solution would be IE6+ compatible, while the one I gave you is IE8+ compatible.
Related
Here's what I'm wanting to do. When the site gets down to medium and small sizes, I want 100% width with margin: 20px all around. I'm trying to not define specific pixels for the width, so that it's consistent across all devices as much as possible. I figured that my CSS would apply the 20px margin to the right side as well as the left, but it's only applying to the left and the right is going outside the window.
Here's my HTML:
<div class="swipe-content">
<div id="your-accounts">
<h1>Your Accounts</h1>
<p>
Your accounts data will go here.
</p>
</div>
</div>
And here's my CSS:
.swipe-content {
clear: both;
width: 100%;
padding: 20px;
background-color: #fff;
margin-top: 20px;
}
Sorry to waste anyone's time with this, but it's late and I'm probably missing something really simple. I'm coming back to coding after a couple of years and any help would be appreciated.
In CSS when you specify a width, it usually means the inner-width not the outer-width.
outer-width = inner-width + margin + padding + border
In your case, your div is becoming 100% + 20px (left padding) + 20 px (right padding)
When you add display: block, the div will automatically try to take up as much width as possible.
Sure, in CSS 3 you could take advantage of the box-sizing property as focorner suggested. But to be compatible i would suggest removing width: 100% and adding display: block.
For this to work, you would need an outer div which has 100% width and is display:block
TL;DR
{
display: block;
// width: 100%; remove this
padding: 20px
}
One simple option would be to use:
.swipe-content {
box-sizing: border-box;
...
}
One way you could do this is by creating an outer div that fills the entire page and setting it to have a left and right padding of both 20px.
You could then put a div on the inside that fits 100% of the outer div.
#outer {
padding: 20px;
background-color: blue;
}
#inner {
width: 100%;
height: 500px;
background-color: grey;
}
Here it is in action: https://jsfiddle.net/SplashHero/cb1xs67u/
you can do like this
.swipe-content {
clear: both;
width: 100%;
padding: 20px;
background-color: #fff;
margin : 20px 20px 20px 20px;
}
Please look at the following: http://jsfiddle.net/ran5000/uZ7dD/
the header div has a fixed height of 40px, I want that the content div will use the remaining height of the screen without scroll and regardless of the screen height.
any ideas?
I generally use position:absolute for this, and then set the top value to start at the bottom of the header.
http://jsfiddle.net/uZ7dD/4/
.content {
background-color: yellow;
position:absolute;
top:40px; bottom:0; left:0; right:0;
}
Do you mean like that?
If so, I've used
position: fixed;
property in CSS.
I'm not sure what the browser support is like for the calc CSS feature, but this would be a good case for it. You can read about it here. You would need to change the height of the content div to height: calc(100% - 40px). This, of course doesn't take into account any space taken up by margin, padding, or border so it will still overflow a bit. If you make sure your divs don't have any of those it works perfectly. Here is my JSFiddle for it.
You can also use position: absolute and set the top value to 40px and the bottom to 0px but your parent element needs to have position: relative set.
Alternatively, you can use JavaScript/jQuery to calculate the required height of the content div and apply it.
For css3 browsers just use:
.content {
width: 100%;
background-color: yellow;
height: -moz-calc(100% - 40px);
height: -webkit-calc(100% - 40px);
height: -o-calc(100% - 40px);
height: calc(100% - 40px);
}
for non-css3 browsers use this workaround,
HTML:
<div class="container">
<div class="header">i am the header</div>i am the <content></content>
</div>
CSS
.header {
width: 100%;
height 40px;
line-height: 40px;
background-color: blue;
}
.container{
height: 100%;
background-color: yellow;
}
Hope I could help :)
In this case, the properties of table elements have some advantage in the fact that they have a lot of positioning power. In this case specifically, table rows and cells will always adjust to fill the table container.
Obviously, you don't want to be using actual table html elements, as that would not be semantic, which is where css comes into the game:
If you put a container/wrapper element around both your header and content, and then set it to be display: table; with 100% height and width it will act as the base table element.
Setting your header and content to display: table-row; will now associate them with that container and allow everything to share the table properties. Setting a fixed height on one will still work, and the other will simply fill the remaining space.
<div class="container">
<div class="header">i am the header</div>
<div class="content">i am the <content></content></div>
</div>
And the css:
.container { display: table; width: 100%; height: 100%; }
.header, .content { display: table-row; }
This approach also has the benefit of being well supported across browsers.
I'd like to have a div that is centered on the document. The div should take all the space it can to display the content and the content itself should be aligned to the left.
What I want to create is image gallery with rows and columns that are center and when you add a new thumb it will be aligned to the left.
Code:
<div id="out">
<div id="inside">
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
</div>
</div>
and the CSS:
img {
height: 110px;
width: 110px;
margin: 5px;
}
#out {
width: 100%;
}
#inside {
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: left;
background: #e2e2f2;
}
Live version here: http://jsfiddle.net/anPF2/10/
As you will notice, on right side of "#inside" there is space that I want to remove, so this block will be displayed until the last square and all of it will be centered aligned.
EDIT:
Please view this photo: https://www.dropbox.com/s/qy6trnmdks73hy5/css.jpg
It explains better what I'm trying to get.
EDIT 2:
I've uloaded another photo to show how it should adjust on lower resolution screens. notice the margins on the left and right. This is what I'm trying to get (unsuccessfully so far :\ )
https://www.dropbox.com/s/22zp0otfnp3buke/css2.jpg
EDIT 3 / ANSWER
well, thank you everybody for trying solve my problem. I solved this problem using JS, with a function that listens to a screen resize event. The functions checks the size of the right margin and add padding to the left so all the content is centered. I didn't find a solution using CSS. If you have one, I'd very much like to know it.
Thanks eveyone!
Specify a width for #inside to center it. I used width: 120px. Fiddle: http://jsfiddle.net/anPF2/7/
Additionally, CSS should be used for the height and width of images, not attributes such as height="300". The fiddle reflects this change.
use of display:inline-block takes extra margins. To remove those set font-size:0px to the #out container. See the demo
This is what you want to achieve? demo
img {
height: 110px;
width: 110px;
margin: 5px;
display: inline-block;
}
#out {
width: 100%;
margin: 0 auto;
position: relative;
border: 1px solid red;
}
#inside {
position: relative;
background: #e2e2f2;
}
You shouldn't use Pixels when laying out your css, it makes it very rigid and causes possible problems for people with high resolution screens and low resolution screens. Its best to declare it as a % or em (% is still probably slightly better when working with widths, but em for height is perfect)
First, the "outer" div must be declared to be smaller than what it is inside. For instance if "outer" is inside body:
#outer{
width: 100%;
}
#inside{
width: 80%;
margin-left: auto;
margin-right: auto;
}
#inside img{
height: 110px;
width: 110px;
margin-left: 1%;
margin-right: 1%;
margin-top: 0.5em;
float: left;
}
Okay so, since "inside" is 80% of "outer"'s width, the margin-left:auto, margin-right: auto together make the "inside" div center within the "outer".
Setting the float property to left moves all the imgs of inside to always try to move left while it can.
EDIT: I fixed this after looking at your picture you provided.
I haven't tested this but I believe it should work, let me know if you are having more problems.
To make the boxes not go the entire width of the page, try setting the width less than 100% on #out and add margin:auto; to center it.
#out {
width: 90%;
margin:auto;
}
http://jsfiddle.net/anPF2/36/
I wish the two sections of my design (see attached image) to extend the whole height of the page. I have tried to create a Fiddle but it just won't work in there, so I've put up a link here to demo what I mean.
I have set the height of the div that holds the results to 100%. However, it doesn't stretch right down to the fixed footer.
#found-results {
height: 100%px;
margin-bottom: 50px;
background: #CCC;
}
I also want the green box to stretch down to the footer. The CSS is:
.main {
width: 606px;
float: left;
padding: 15px 0 0 16px;
position: absolute;
background: green;
margin-left: 383px;
}
Now, if I add height: 100%; to it, it seems to work, but if one of the tabs contains a lot of text, it doesn't stretch far enough.
Any help will be much appreciated.
Equal-height columns
In a way, the tricky part isn't the fixed header and footer, or the 100% height; the tricky part is the equal-height columns. Often, it's better to fake equal-height columns (e.g., adding a grey-green background image to the parent container). Doing so typically allows the code to be simpler, more flexible, and more stable, compared to true equal-height columns. If the layout for this website proves too unwieldy, try faking the equal-height columns instead (as shown in this demo), and see if that helps the layout to become more manageable.
With that being said, the basic options for true equal-height columns are as follows:
HTML tables
CSS tables
CSS3 flexbox
CSS3 grids
JavaScript or jQuery
Here's a JSFiddle demo with true equal-height columns using CSS tables. The left column has very-tall content, and the right column has short content. The demo tested fine in IE10, Firefox, Chrome, Safari, and Opera; however, this may only work for relatively-simple layouts.
Here's a similar demo using HTML tables, in case support for IE8 is needed.
Faking the equal-height columns
Here's another demo that fakes the equal-height columns by adding a 2-color background image. This demo also tested fine in IE10, Firefox, Chrome, Safari, and Opera; however, unlike the previous ones, it's much more likely to support complex page layouts.
HTML
<div id="header">...</div>
<div id="content" class="clearfix">
<div class="column1">...</div>
<div class="column2">...</div>
</div>
<div id="footer">...</div>
CSS
html, body {
height: 100%;
...
}
#header {
position: fixed;
top: 0;
height: 120px;
...
}
#footer {
position: fixed;
bottom: 0;
height: 60px;
...
}
#content {
min-height: 100%;
padding: 120px 0 60px 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(some-two-color-background.png) repeat-y 53.6% top;
...
}
#content .column1 {
float: left;
width: 250px;
}
#content .column2 {
float: left;
width: 350px;
}
Note: The apparent column widths for the background image are controlled by setting the background-position property. This allows two columns of any explicit width (px or %) to be faked using the same generic background image. Alternately, a custom background image with the exact column sizes could be used, to simplify the CSS.
I think you are after something like this? jsFiddle
I have made it a bit easier for myself by only copying the markup I needed from your website, the class's, id's and the elements used are exactly the same as on your website, that should make it fairly easy for you to implement this solution on your website.
This layout will always at least fill the whole screen, and both sections will be the same height and touch the fixed footer. When the content is to high for one of the sections, a scroll bar will appear and you can scroll down until you have reached the bottom of both sections. Both sections will always be the same height. I have added some buttons in the header which will add and remove content inside the columns, this makes it easy to see what happens when the content is taller than than the height of the document.
Edit
I realised you probably want your header to be fixed as well (as this seems to be the case on your current website), here's a version with a fixed header. jsFiddle.
Edit2
I have added some buttons to the fiddles to make it easier to see what happens when the content inside the columns is forcing the columns to be taller than than the height of the document.
HTML
<header></header>
<div id="container">
<section class="results"></section>
<section class="main"></section>
</div>
<footer></footer>
CSS
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
header {
position: fixed;
top: 0px;
height: 60px;
width: 100%;
background-color: #FFF;
}
#container {
height: 100%;
overflow:auto;
padding-top: 60px;
padding-bottom: 60px;
display: table;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
footer {
position: fixed;
bottom: 0px;
height: 60px;
background-color: #333333;
width: 100%;
}
.main {
display: table-cell;
background-color: #008000;
}
.results {
display: table-cell;
background-color: #EFEFEF;
width: 383px;
}
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
I think your problem sits here: #found-results { height: 100%px; ...
...and further I think you have to add this too:
html, body {height: 100%}
you can set the height with jquery according to height of sidebar after loading page
$(document).ready(function(){
$('#main').height($('#sidebar').height());
});
You can use Jquery to achieve this.
$(document).ready(function() {
var window_height = $(window).height();
var footer_h = $("#footer").height();
var container_height = window_height - footer_h ;
$("#container").hide();
$("#container").css('min-height', container_height + "px");
$("#container").show();
});
I have a wrapper that contains all the elements of an html page.
#wrapper {
width: 1000px;
height: auto;
min-height: 100%;
margin: auto;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4488ff), to(#4422ff));
[...]
background-attachment: fixed;
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
}
Here's the HTML code sample
<div id="wrapper">
<div id="uppermenu">
<div id="container">
<div id="logo"> <img src="images/logo.png" height="100%"> </div>
<div id="banner"> <br></div>
</div>
</div>
<div class="sidemenu"> [...] </div>
<div id="guide"> [...] </div>
</div>
I want this wrapper to change its height depending on the content it has to contain, but as I do this is not happening.
If I try to use
overflow: hidden;
the wrapper is shifted down by the uppermenu div (which it should be containing) and using
clear: both;
at the end of the contents doesn't change anything.
I've tried at least 5 different question answered correctly here but none worked well for me.
Last thing: the wrapper set as I wrote (with min-height at 100%) fits perfectly the screen of my browser, but that clearly not what I want it to look!
Any help???
EDIT: here's the CSS of sidemenu class
.sidemenu {
float: left;
margin-left: 20px;
margin-top: 20px;
height: 200px;
width: 150px;
background-color: #4488ff;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
z-index: 3;
}
and of the guide id
#guide {
float: left;
margin-top: 20px;
margin-left: 50px;
height: 100%;
width: 760px;
background-color: #4488ff;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
z-index: 3;
}
uppermenu and container
#uppermenu {
position: fixed;
top: 0px;
width: 1000px;
height: 100px;
margin: auto;
background: #004465;
z-index: 5;
}
#container {
width: 1000px;
min-height: 100%;
margin: auto;
}
Solution one: clear: both
Adding a block element with the style clear:both; onto it will clear the floats past that point and stop the parent of that element from collapsing. http://jsfiddle.net/TVD2X/1/
Pros: Allows you to clear an element and elements you add below will not be effected by the floated elements above and valid css.
Cons: Requires the another tag to clear the floats, bloating markup.
Note: To fall back to IE6 and for it to work on abstinent parents (i.e. the input element) you are not able to use :after.
Solution two: display: table
Adding display:table; to the parent to make it shrug off the floats and display with the correct height. http://jsfiddle.net/h9GAZ/1/
Pros: No extra markup and is a lot neater. Works in IE6+
Cons: Requires invalid css to make sure everything plays nice in IE6 and 7.
Note: The IE6 and 7 width auto is used to prevent the width being 100%+padding, which is not the case in newer browsers.
A note on the other "solutions"
These fixes work back to the lowest supported browser, over 1% usage globally (IE6), which means using :after does not cut it.
Overflow hidden does show the content but does not prevent the element from collapsing and so does not answer the question. Using an inline block can have buggy results, children having strange margins and so on, table is much better.
Setting the height does "prevent" the collapse but it is not a proper fix.
Invalid css
Invalid css never hurt anyone, in fact, it is now the norm. Using browser prefixes is just as invalid as using browser specific hacks and doesn't impact the end user what so ever.
In conclusion
I use both of the above solutions to make elements react correctly and play nicely with each other, I implore you to do the same.
get rid of min-height: 100%. this means that the minimum height of the div is 100% of your browser height. eliminating this should make it fit to the content