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
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.
I'm trying to achieve, that the div's will behave like an example on picture, using css:
Is there any clean way to do this? I achieve this using javascript to calculate "left" div height and "main" div width and height. But i dont like this solution...is there any way to do this using css only?
Edit:
Page must not have scrollbar...so page's height is always max 100%, and no more...
thanks
If the sidebar (or any other div) is 100% height, and on top you have a 30px header, so that causes your container to be 100% + 30px height.
In the future you will have in css3 calc():
http://hacks.mozilla.org/2010/06/css3-calc/
This will solve your problem.
But for now you can add overflow: hidden; to the html and body section, but I recommend calculate the height of the sidebar ( container height - header height) using Javascript.
Check fiddle here
If you mean the two-column layout, you do it with pure CSS like this:
.container {
background-color: #aaaaaa;
}
.left {
float: left;
width: 100px;
clear: left;
}
.right {
margin-left: 100px;
background-color: #888888;
}
and HTML:
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>
Live demo: jsFiddle
The div on top can be achieved without any special CSS. To place something below (a footer for example), you'll need to use clear: both.
Without any code it is hard to determine what you want. Here is a extremely simple version of what I believe you want.
HTML:
<div id="header">
</div>
<div id="side">
</div>
<div id="content">
</div>
CSS:
#header {
width:100%;
height:50px;
}
#side {
width:300px;
height:100%;
float:left;
}
#content {
width:660px;
height:100%;
float:left;
}
jsFiddle
I followed a tutorial/instructions online to make a sidebar fixed position by making the sidebars position "fixed" and it worked fine. Now I realize that since my page has a min-width attribute, when the user scrolls sideways the content that doesn't move moves into the sidebar. So basically, I'm looking for a way to produce a fixed sidebar when your scrolling down, but when you move sideways the content doesn't jump into the sidebar. My code is kind of like the following:
CSS
#sidebar {
position:fixed;
height:500px;
width: 100px;
background-color: blue;
}
#content {
width:100%;
box-sizing:border-box;
margin-left:100px;
background-color:purple;
}
Html
<div id="sidebar">
</div>
<div id="content">
</div>
JSFiddle: http://jsfiddle.net/znCF3/1/
NOTE: This is not my actually code but a minified version of it because my code is really complex. Also, I can't just use a fluid layout.
As said by others, not possible with only css and html. However, you can do this with javascript/jquery.
Just encase you want to use jquery to do this, first as watson said, change index of side bar (I had to make negative), just encase it jquery doesn't work for whatever reason for someone.
Then add to your <head>:
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
<!--
$(document).ready(function() {
$(window).scroll(function(){
var offSet = - ($(this).scrollLeft());
$('#sidebar').css('left', offSet);
});
});
//-->
</script>
Example
Check out this fiddle: http://jsfiddle.net/NfKca/
Modified css as:
#sidebar {
position:fixed;
height:500px;
width: 100px;
background-color: blue;
}
#content {
box-sizing:border-box;
background-color:purple;
position:absolute;
left:100px;
}
You could set the z-index: 1; on the sidebar. If this doesn't help, it would be great if you could make a jsfiddle to illustrate what you mean more.
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.
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.