I want to create a css layout:
2 columns
Each column with a height of 100% of
the window
Left column should be width 40% and
have two rows, the height of the bottom row should be
20px and top should take up the remaining
space
Right column should be width 60% and
have two rows, the height of the top row should be 70% and bottom
30%.
I also want to be able to toggle hide/show on the second column and display another column in its place. I know how to hide and show with javascript but I dont know how to place the other column in the second column's place without using absolute positioning.
Here is an example of the two different layouts, the blue area represents the window size and the green is the divs, I didnt mark the columns but you should be able to see that there are two columns. Also I am going with margin: 0 and padding: 0, I left the space inbetween the divs to clarify the layout:
http://imageshack.us/photo/my-images/535/layout1rt.png/
http://imageshack.us/photo/my-images/683/layout2z.png/
* UPDATE *
Sorry for all the anger my question generated. I have googled and experimented with divs but havent come up with a good solution yet. The one I have doesnt really fit 100%, there are some pixel differences, I will post the code below. I made the design with framesets first and then tables and then I thought that I have to learn how divs really work sometime. Well after some days searching and reading about css float left right and so on I gave up and created this account.
It seems it would be very fast for someone who understands it to make my wanted layout and thats why I didnt post my code. I could just learn by reading and playing with the answer code, but you are right, I made a mistake.
My code works 100% in Mozilla but fails in IE.
* UPDATE *
* UPDATE 2
I got it all working but there seems to be a pixel error in IE so I had to add overflow: hidden to not get the scrollbars. Dont know whats the cause?
UPDATE 2 *
<html>
<head>
<script type="text/javascript">
function toggleSheet(){
if(document.getElementById("col3").style.display == "block"){
document.getElementById("col3").style.display = "none";
} else {
document.getElementById("col3").style.display = "block";
}
}
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
overflow:hidden;
}
#wrapper {
width: 100%;
height:100%;
}
#col1 {
float:left;
width: 40%;
height:100%;
background:blue;
}
#col2 {
float:right;
width: 60%;
height:100%;
background:red;
}
#col3 {
position:absolute;
width: 60%;
right:0;
height:100%;
background:black;
display:none;
}
#col1top {
height:100%;
margin-bottom: -20px;
background:purple;
}
#col2top {
height:70%;
background:green;
}
#col1bottom {
height: 20px;
background:brown;
}
#col2bottom {
height:30%;
background:yellow;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="col1">
<div id="col1top" onClick="toggleSheet();">
</div>
<div id="col1bottom">
</div>
</div>
<div id="col2">
<div id="col2top">
</div>
<div id="col2bottom">
</div>
</div>
<div id="col3">
</div>
</div>
</body>
</html>
Thanks for your time.
/illion
This is really kind of a ridiculous thing to answer but I was bored.
http://jsfiddle.net/m7TuJ/embedded/result/
Not a best solution by any means but it achieves what you're asking for.
Related
I am trying to make a fluid grid website and now im facing a problem which a just cant seem to fix just using css. Obviously i'm doing something wrong, but i just cant find what.
Here's the thing: I have one column (div: left) and one body (div: right) displayed in-line. in stage one div left has a width of 180, and div right is growing till it reached 640px (like youtube). In stage two i want to make the column grow some more from 120px to 150 px, But when the column is growing div right gets pushed down, even though there is enough space. Im thinking it has something to do with the margin's technique ive been using but i cant find it, and dont know any alternatives i could use since im trying to do this without using java.
Here is my jsfiddle: which will show the problem clearly: http://jsfiddle.net/tomvisser/WcbYL/embedded/result/
I happy with all help i can get.
Thanks in advance.
<body>
<div class="gridContainer clearfix">
<div id="center">
<div id="left">This is the content for Layout Div Tag "left"</div>
<div id="right">This is the content for Layout Div Tag "right"</div>
</div>
</div>
</body>
here is the css:
#left {
float: left;
height:400px;
width: 150px;
display:inline;
background-color:#F00;
}
#right {
margin-left:150px;
background-color: #6F0 ;
height:400px;
}
#media only screen and (min-width: 650px) {
.gridContainer {}
#right {
margin-left:0px;
width:500px;
float:right;
display:inline;
}
#left {
margin-left:0px;
float: right;
width:100%;
margin-right:500px;
}
Yes it's the margin pushing it down. Not sure what you're asking exactly but I can probably bet you're looking to give the 2 divs the max-width property.
So for step 2 (the media query?), delete the margins and try doing something like:
max-width: 180px;
for the left column.
This is the code I edited in your media query block:
#right {
margin-left:0px;
width:500px;
float:right;
display:inline;
}
#left {
margin-left:0px;
float: right;
max-width:180px;
}
Although do you have them floating right on purpose?
Hi i tried your code and find a solution for you.Hope it will help for you.Here i am
assuming the total width of a page is 1024px.
HTML code
<div class="gridContainer clearfix">
<div id="center">
<div id="right">This is the content for Layout Div Tag "right"</div>
<div id="left">This is the content for Layout Div Tag "left"</div>
</div>
</div>
CSS
<style type="text/css" >
#left {
height:400px;
background-color:#F00;
width:512px;
}
#right {
background-color: #6F0 ;
height:400px;
float:right;
width:512px;
}
</style>
Here i am giving width 512px to each div because i am assuming that total width of page
is 1024px.If you want to increase the width of left by 12 px means 512px + 12px = 524px
then you need to decrease 12px from div right width because width cannot be more
then total width of page i.e 1024px.After decreasing it will become 500px and again
524px + 500px = 1024px.In that case your right div will not push down.
Hope you understand and will work for you.
It seems there are several posts on this topic but none of the solutions have worked for me. Perhaps someone can figure out what I'm missing.
I have three boxes floated next to each other like columns. Due to certain background images etc., each box is composed of two divs. The outer div has the class "calloutbox" and is floated left. Inside of "calloutbox" is another div called "callout-content" that holds the dynamic content (I'm using wordpress).
So far I have not been able to get the boxes to expand to fit their dynamically generated content. They collapse if I set height to 100%. I've tried a dozen combinations of overflow:hidden, clear:both etc. with no luck.
<div id="callout-container">
<div class="calloutbox">
<div class="callout-content">Dynamic content goes here</div>
</div>
<div class="calloutbox">
<div class="callout-content"></div>
</div>
<div class="calloutbox">
<div class="callout-content"></div>
</div>
</div>
Here is the css:
.calloutbox {
min-height:310px;
width:30%;
float:left;
margin:0 0 0 25px;
position:relative;
background-image:url(images/shadow.png);
background-repeat:no-repeat;
background-position:right bottom;
display:block;
}
.calloutbox:after {
clear:both;
}
.callout-content:after {
clear:both;
}
.calloutbox:nth-child(1) {
min-height:200px;
}
/*The content inside the three boxes on the homepage */
.callout-content {
height:100%;
width:90%;
right:8px;
border:1px solid #e6e4e4;
bottom: 8px;
background-color:white;
position:absolute;
background-image:url(images/yellow-title-bar.png);
background-repeat:repeat-x;
background-position:top;
padding: 0 10px 10px 10px;
}
Here's the code in a jsfiddle if that helps anyone: http://jsfiddle.net/daniec/r8ezY/
Thanks in advance!
They are not floated, they are absolutely-positioned.
Absolutely-positioned elements are no longer part of the layout. They no longer have parents are far as layouts are concerned. Therefore, you need to specify their sizes in pixels rather than percentages. Percentages are relative to the wrappers they no longer have.
Working with floats can be a pain. As an alternative, have you tried using to use inline-block:
display: inline-block;
It behaves like an inline element, but an be styled like a block level element. It does not work in IE6 though.
.calloutbox {
white-space:nowrap;
}
Should do the trick. otherwise try creating a jsfiddle, so we can run your code
How can I create a 3 column CSS layout, with the left and right edges flush with edges of parent element? I want to be able to do this within a liquid layout, so no fixed widths.
This sounds like it should be easy, but the best thing I can come up with is quite a hack.
<style>
.c3 { display:block; text-align:center; }
.c3 span { display: inline-block; width:20%; text-align:left; vertical-align:top; }
.c3 .left { float:left; }
.c3 .right { float:right; }
</style>
...
<span class="c3">
<span class="left"> ...
</span>
<span class="center"> ...
</span>
<span class="right"> ...
</span>
</span>
You can see it here, this works okay (in my browser at least) but it just feels wrong. Is there a better way to do this?
Since there seems to be some confusion about what I'm trying to do, here it is in context. I run into this fairly often, where I already have a page layout and I want three columns within that layout. I want the three columns to be "fully justified," and I want things to be liquid, because even thought the page has a fixed layout, there's usually a facebook app or something also and I like to reuse as much as possible. Here's the latest example of where I've run into this (bottom of the page).
I'm not worried about SEO, the content is usually in 1-2-3 order of importance. I don't really care if they're all the same length. I'd like to not use a ton of markup if possible. My main goal is to have the left and right edges flush with the parent element, and and equal amount of space between each column.
I could try to write a new layout for you or fix the one you started, but I feel like I should just point you to a good source for the layout you're after:
The Perfect 3 Column Liquid Layout (Percentage widths)
No CSS hacks. SEO friendly. No Images. No JavaScript. Cross-browser & iPhone compatible.
http://matthewjamestaylor.com/blog/perfect-3-column.htm
I have used this resource for many years and it's rock solid, even in IE6. Make sure to click around to see all the examples, and read the article so you understand how it works.
This is an image of the basic layout structure (not the actual output):
It uses some crafty relative positioning and SEO-friendly 2-1-3 source order. Full height faux columns, fixed-width or fluid columns...
I cannot recommend this resource enough, I hope you enjoy it.
OK, sounds like you just want a lightweight alternative to your already-working solution.
Per our discussion in chat, I'm posting the mini-template I created:
<div class="wrapper">
<div>1</div>
<div>2</div>
<div class="last">3</div> <!-- or use CSS3 :last selector -->
</div>
.wrapper {
width:500px; /* any width OK */
float:left;
}
.wrapper div {
width:30.65%; /* not perfect, but close */
padding:1%;
margin:0 0 0 1%;
float:left;
}
.wrapper div:first-child { margin:0; }
/* make up for imperfect 1/3 width rounding */
.last { float:right;margin:0 }
Demo: http://jsfiddle.net/bH8vY/2/
Best of luck.
As far as I can tell, the solution I gave in the question is the best answer for this. I haven't found any other suggestions since posting this that would achieve what I want.
I'll reiterate it here so the question can be closed.
<style>
.c3 { display:block; text-align:center; }
.c3 span { display: inline-block; width:20%; text-align:left; vertical-align:top; }
.c3 .left { float:left; }
.c3 .right { float:right; }
</style>
...
<span class="c3">
<span class="left"> ...
</span>
<span class="center"> ...
</span>
<span class="right"> ...
</span>
</span>
This might be what you want/help you; I've made a layout that uses css to emulate dynamic table behaviour [using divs]. It works in Chrome, Firefox and IE>7.
DEMO, have a go at resizing the window. That middle bit is what you want, I think.
Have a fiddle with it. Uncomment the border css line to see whats going on.
Code:
<div class="view" style="height:100%; width:100%">
<div class="north">
n
</div>
<div class="middle">
<div class="west">
w
</div>
<div class="centre">
c
</div>
<div class="east">
e
</div>
</div>
<div class="south">
s
</div>
</div>
html, body {
height : 100%;
margin : 0;
}
.view,
.view > .middle {
display : table;
}
.view > .north,
.view > .south {
height : 1px;
display : table-row;
}
.view > .north { vertical-align : top; }
.view > .south { vertical-align : bottom; }
.view > .middle > div {
display : table-cell;
}
.view > .west,
.view > .east {
width : 1px;
}
/*div { border : 1px solid black; }*/
Simple markup, no JS, and dynamic layout.
Let's say I have a <div> (#container) that's set to 960px for it's width. Inside that <div> , I want to create another <div> (#drawer) that's as wide as the page window. So basically, I would like to create a <div> within a <div> that's wider than its parent <div>:
<div id="container"> // Set at 960 px
<div id="drawer"> // I'd like this to be as wide as the window
</div>
</div>
CSS:
#content {
top:200px;
position:absolute;
width: 940px;
padding-bottom:100px;
}
#drawer {
????
}
---Update---
Hey Everyone,
Thanks for all the answers. I guess I should make my answer a little easier to follow. See below for some sort of visual description. I hope it helps!
Well you could set botht he left and right values if you make it absolutely positioned. This way you can still use padding directly on the #drawer if you want to.
#container {
top:200px;
width: 940px;
padding-bottom:100px;
background-color:rgb(255,0,0);
}
#drawer {
position:absolute;
right: 0px;
left:0px;
background-color:rgb(0,255,0);
}
I don't think it's possible for a child div to be wider then its parent. Maybe if you told us what you were trying to accomplish, we could help you.
i dunno what you're trying to do with that. But, i think this code works (by just removing "position : absolute" in #content :
<html>
<head>
<style type="text/css">
#content {
top:200px;
width: 940px;
padding-bottom:100px;
}
body {
margin:0px;
padding:0px;
}
#drawer {
background-color:blue;
top:0px;
position:absolute;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="content">
<div id="drawer">
a
</div>
</div>
</body>
</html>
you can find out the width of the screen on pageload using javascript and then set the css width value to the same. this is a bad way of doing it....but its still a way. Why do you need to do this btw ?
I second rudeovski ze bear's comment. However, if you want to do this, you'll need to set the width explicitly (you can't rely on width: 100%, because it will always use the containing div for reference).
So you'll need something like:
#drawer
{
width: 1200px;
}
You can use a little jQuery to make this more dynamic:
$(function() {
var windowWidth = $(window).width();
$('#drawer').css('width', windowWidth);
});
You can use negative margins and calc() to calculate the 100vw - container width, all negated and divided by 2 for the left and right margin.
Because you know the width of your parent container, 940x in this case, the negative margins for the #drawer would be:
margin-left: calc(-100vw / 2 + 940px / 2);
margin-right: calc(-100vw / 2 + 940px / 2);
Tip!
To make it nicer, you can use a variable for 940px. If you use SASS, I'm sure you already know how to use variables there.
If you use CSS:
:root {
--container-width: 940px;
}
and then:
margin-left: calc(-100vw / 2 + var(--container-width) / 2);
margin-right: calc(-100vw / 2 + var(--container-width) / 2);
(Before using var, please ensure it is supported by the browsers you need: https://caniuse.com/css-variables)
You can watch it in action here, but please make sure your page is wider than 940px: https://stackblitz.com/edit/js-jscs4f
Im not too great at CSS but hopefully someone on here can help. I have the following mockup. (i have stripped out my content to make it easy to view)
<body>
<div id="container">
<div id="header"></div>
<div id="body">
<div id="navBar"></div>
<div id="mainContent"></div>
</div>
<div id="footer"></div>
</div>
</body>
my CSS is as follows:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
now im unsure as to how to get the "navBar" to be the page height. I've tried adding height: 100% but that doesnt work.
Thanks,
Matt
Giving an element height: 100% will give it a height equal to that of its containing element, which in your case is #body. Since body in your example is only as big as it needs to be to hold its content, #navBar will be 100% of that height.
To fix this, you can make #container and #body height:100% to make them as tall as tho body tag, which takes up the whole page:
#container {
height:100%
}
#body{
height:100%;
}
In the interest of completeness, you could also set the top and bottom of #navBar:
position: absolute;
top: 20px;
bottom: 60px; /* height of footer */
To understand the difference, play around with This JS Fiddle. Mess around with the height and top, bottom, position properties to see how your changes affect the layout; just don't use both positioning methods at once!
Your issue appears to be that each parent DIV all the way up to the BODY tag must explicitely have a height of 100% for #navBar to have 100% height. This means you would also have to set the height of #body to 100% as well, since it is the parent container of #navBar.
Have a look at this site - I assume you want a two column layout - this site will show you how to do what you want. Hope it helps.