Three columns must fill the width of the parent container. The width of the left and the right columns must not be less than 150px. The center column must not be greater than 200px width.
I've made a reference page that uses JavaScript to do the layout. Is it possible to do the same layout with pure CSS?
screenshot http://elv1s.ru/files/html+css/min-width_max-width_columns.png
It should work at least in IE 8, Firefox 3.6, Chrome 7, Safari 5, and Opera 10.63.
Table-based solution by #PanyaKor.
I'm no expert, however I'm pretty sure that if the answer is yes that it is on this page:
Perfect multi-column CSS liquid layouts. iPhone compatible.
That page (and the entire site) is brilliant - it shows you how to achieve a lots of different layouts (using just CSS), and explains exactly how and why they work. Even if that page doesn't contain a layout which suits you, there is a good chance that page will give you a rough idea of the approach you need to take.
Also, good luck!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#container { max-width:960px; width:100%; min-width:400px; overflow:auto;}
#aside { height:300px; width:40%; min-width:150px; float:left; background-color:grey; }
#primary { height:300px; width:20%; max-width:200px; float:left; background-color:red; }
#secondary { height:300px; width:40%; min-width:150px; float:right; background-color:grey; }
</style>
</head>
<body>
<div id="container">
<div id="aside">Leftmost content</div>
<div id="primary">Primary content</div>
<div id="secondary">Secondary content</div>
</div>
</body>
</html>
A couple things about this layout:
I specified the height and background for display purposes only.
Overflow auto is on the containing element to clear the floats; though you can use a clearer div too.
The container has a fluid width, but is maxed out at 960. I choose this number arbitrarily, but it is a good idea to max out fluid widths before lines of text become too long.
If you keep the container fluid, the layout will break if the viewport gets small enough. EDIT: I added a min-width of 400px to the container, this should fix the problem.
Additionally, I would take a look at http://www.alistapart.com/articles/holygrail/ . Although it is an article detailing a fixed-fluid-fixed three column layout, I reckon there are a few ideas there that you could use to improve upon my layout, if you were so inclined.
Related
This question already has an answer here:
How to change CSS of website if accessed through a mobile browser [closed]
(1 answer)
Closed 7 years ago.
I wanted to know how a html /css design can be made responsive so that (if that's what responsive means) the div are arranged according to the screen size(in case of desktop browser being resized manually at runtime).
for example :
i have div1, div2, div3 set as float left. they appear as 3 columns in my browser. Now if i resize(to a smaller size) my browser i want the div1 to come on top. div2 below it and div 3 below div2.
similarly, if i resize my web page fully i want the divs to again appear as 3 columns.
apart from the normal defalut behavior , is there any way through which changes can be specified separately?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="div1" style="width:500px;height:200px;background-color:red;float:left;"></div>
<div id="div2" style="width:500px;height:200px;background-color:yellow;float:left;"></div>
<div id="div3" style="width:400px;height:200px;background-color:green;float:left;"></div>
</body>
</html>
please any help would be greatly appreciated. I am completely new to responsive design layout.
This is mainly achieved with CSS3 Media queries. You can use a CSS frameworks and follow the grid system to reduce your workload.
CSS3 #media Rule
Frontend Frameworks
Twitter Bootstrap
Foundation
Semantic UI
Pure
Duplicate of following stack overflow questions
How do I make a website responsive?
How to create a responsive web design?
The basics of a responsive layout are the use of percentage insteed of pixels and adding breakpoints with media queries.
In your example, you have 3 divs floating so the css should look like this:
#div1, #div2, #div3 {
float:left;
height:200px;
}
#div1 {
background-color:red;
width:40%;
}
#div2 {
background-color:yellow;
width:40%;
}
#div3 {
background-color:green;
width:20%;
}
Always making the sum of all your floating widths 100%.
Then add a breaking point (or as many as you need) like this:
#media (max-width: 600px) {
#div1, #div2, #div3 {width:100%;}
}
where you tell your browser to change the css properties of your divs when window width is 600px or lower. In this case you make each div 100% width so they will stack as you want keeping the html order.
JSFIDDLE
You have to use percentage instead of fixed pixel-values. This is called "making the design fluid".
Have a look at this: https://teamtreehouse.com/community/pixel-to-percentage-conversion
There will be points (when the width becomes to small) at which you're layout doesn't work anymore. Then you use media-queries to re-structure your layout.
I want to have 2 different columns for the content on my website, they way I want it is like this:
http://i.stack.imgur.com/V4uX2.jpg
It shows like that on my computer monitor, but on my mobile it shows up like this:
http://i.stack.imgur.com/H7CNe.png
As you can see, I would like the two sides to always be next to each other and not one under the other as on my mobile.
CSS
#leftSide {
margin-top:80px;
margin-left:200px;
float:left;
width:400px;
}
#rightSide {
margin-top:80px;
margin-left:10px;
float:left;
width:400px;
}
HTML:
<div id="leftSide">
</div>
<div id="rightSide">
</div>
Check the resolution of your mobile. You probably have a screen of width less than 800px while your content needs more than 800px to be displayed.
Also, for 2-column display, the best way is to use float left and right on the two divs. You should read about responsive CSS which can stylize the width of your divs based on the device width.
you could use a few things...
The display block-inline function or you could just float the picture right. Or you could use tables but I personally hate those.
#sidebar {
margin-top:80px;
float:right;
width:400px;
margin-left: 5%;
Make sure that the the total widths don't exceed the width of your parent container. You also might want some padding on the right side of the picture.
How can I make DIV width 100% (body width) with CSS? Currently, my div (.MainHeading) width is set as 100%, but it doesn't display like 100% when the content width in another div is greater than the screen size. It just displays in top-left corner.
I've been searching for the solution for some time but I haven't found it yet...
This is my CSS:
body
{
margin:0;
padding:0;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.MainHeading
{
margin: 0 auto;
background-color:Gray;
background-repeat:repeat-x;
height:auto;
min-height:93px;
width:100%;
}
.Body-Area
{
margin:0 auto;
overflow:visible;
width:950px;
max-width:950px;
height:100%;
min-height:395px;
}
.Container
{
display:table-row;
position:relative;
}
.Mid-Div
{
display:table-cell;
position:relative;
padding-left:2%;
padding-right:2%;
float:left; /*for IE 7 & 9 Compatible View*/
overflow-x:auto;/*for IE 8*/
vertical-align:top;
width:100%;
max-width:950px;
overflow:hidden;
}
And here is my HTML code:
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div class="MainHeading">
</div>
<div class="Body-Area">
<div class="Container">
<div class="Mid-Div">
<img align="bottom" width="1224" vspace="1" lang="en" hspace="1" height="332" border="1" src="images/cover2.png" alt="Test" id="imgtest" dir="ltr" />
</div>
</div>
</div>
</body>
</html>
I've run this code and it seems to be fine. The heading div is 100% of the body, which in turn is the full width of the viewport.
Update in reply to comment:
I finally see now. You have a mistaken assumption, which is that the image is expanding the body. In fact, your body remains at 950px, even with min-width, because the image is not expanding it. So the 100% is actually correct.
The problem isn't the width setting, it's the float on your Mid-div. Floating takes it out of layout, so the contents of that div are not pushing the page larger. You have to find a method that eliminates the float. You also have a max-width of 950, so if you want the body to grow, you have to get rid of that. Otherwise the image will simply clip. If clipping the image is acceptable, then perfect. :-)
My advice, and I'm sure it sucks to hear this, is to rethink your approach from the ground up. Adding a bit here and a bit there, subtracting something, changing a value... these are going to lead to a mess. The problem you want to solve should be very simple and require not too many rules... write some "requirements" (what must the page do, and under what circumstances) and then rewrite the CSS.
In any event, here's a "proof of concept" branch of sandeep's fiddle without the float; the image is clipped rather than expanding body (due to min-width):
http://jsfiddle.net/ZMWpW/1/
Define min-width to your body. write like this:
body{
min-width:950px;
}
Check this http://jsfiddle.net/ZMWpW/
I know I'm answering like a year after this question was asked, but I just had the same issue and found this post; the base for my answer is the one already published by sandeep.
Define min-width to 950 on your .MeanHeading div, that should do the trick, however it has a downside, it would be the minimum width of your heading if you dont have a problem with this I think you are good to go.
I am looking for two divs that look like this:
<div style="height:20px;" />
<div style="height:100%;" />
This gives me two divs, one with 20px height, and the other at 100% of the entire screen height, which puts a vertical scroll bar worth 20px. What I actually want is one to be 20px, and the other to be 100%-20px. I know that IE has calc() method, but isn't there a much easier way to do this that will work in all browsers?
#div1 {
height:20px;
position:fixed;
top:0px;
right:0px;
left:0px;
}
#div2 {
position:absolute;
top:20px;
bottom:0px;
right:0px;
left:0px;
}
maybe this is what you need..
EDIT sorry misread the title.. corrected :O how ever if you wish to have multiple div2 the you might need a structure like
<div id="div1"></div>
<div id="div2" style="overflow:auto">[multiple div2 go here]</div>
I tried this out, adding a little sample text to your div, and got rid of the scroll bar simply by not giving the second div a height, and allowing the broswer (both IE and FF) to figure out for itself what hieght to give it.
However, given your comment to George, I think this may not be your fix either. Perhaps you could post a little bit more of your code (or psuedo-code) to give at least one typical example of the second div being replaced.
There is an easy way: Place the first div (20px) inside the second.
EDIT: Since my first answer is not an option for you, you can use scripting to resize the div on the fly. You can caclulate document.height - 20px and apply the result as the height of the "100%" div. CSS does not offer a way to do:
height: 100% - 20px
However, Javascript does:
(via jQuery:)
$( "#big_div" ).height( $( document ).height() - 20 );
It is possible without any Javascript if you can provide a fixed width:
http://jsfiddle.net/mNNeq/47/
The following is an excellent resource to help you with positioning content:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
I have a quick CSS question, i'm hoping that somebody can help me out!
I have a DIV called #ContentPanel and I want it to be able to expand so that it can cater for more text if needed. At the moment if the text is longer than 500px (as specified in the CSS) it flows out the bottom and over the content in the div below. How can I set it up to auto expand and push all divs after downwards.
If anybody has any ideas, please let me know
Here's the HTML
<div id="MainContent">
<div id="MainImage"></div>
<div id="ContentPanel">Text content goes here.</div>
</div>
...and here's the CSS
#MainContent {
position:relative;
height:500px;
width:800px;
margin:0 auto;
background-color: #000;
}
#MainImage {
position:absolute;
top:0;
left:0;
width:350px;
height:500px;
background-color:#000;
}
#ContentPanel {
position:absolute;
height:500px;
top:0;
left:350px;
width:450px;
background-color:#000;
}
Thanks in advance!
Kind regards,
Decbrad
Use min-height instead of height.
Except for IE 6: It has a bug, so that it interprets height like min-height.
As mentioned the problem is that you define a fixed height .. and so the browser adheres to it..
You need to make it more flexible by using the min-height property. However IE does not support it, but due to another bug on how it handles the height (which it expands to cater for the content if more than the defined height) it can be worked around..
A complete solution is
height:auto!important; /*this set the height to auto for those supporting it (not IE)*/
height:500px; /*for IE, all others override it by the previous rule*/
min-height:500px; /*for the ones that support it (all but IE)*/
This, in general, is the solution to such problems.. in your case i see that you use absolute positioning.. if you really need this, and it is not just an attempt to solve your problem, then unfortunately there is no way for an element to adjust its size to cater for absolute positioned elements..
Try setting a minimum height (min-height:) as opposed to a specific, fixed height.
The property you're after is min-height, rather than height.
http://www.w3schools.com/CSS/pr_dim_min-height.asp
This means your element will be at least that high. If the content warrants it, the height will grow past the specified value.
As a second option, you might want to try overflow: scroll; or overflow-x and overflow-y to have a scrollbar appear on the div in case the content doesn't fit.
Personal opinion: to get around IE6's issues with min-height, it's really better to use an IE6-specific conditional comment in your targeting it rather than adding hacks into your CSS.
This is if having standards-compliant CSS matters to you, although tbh that's getting more and more difficult these days thanks to wonky browser support.
<!--[if IE 6]>
#MainContent, #MainImage, #ContentPanel { height:500px; }
<![endif]-->
you need to use min-height css attribute