Above is a screenshot of what I'm trying to accomplish. I tried setting height:100%, but I get an "overflow" caused by having margin-top:48px, causing me to scroll down even though the content fits on 1 screen.
Right now the content is only up to the colored part (I edited it out for clarity).
It's CSS is:
#main_area {
float: left;
width: 600px;
margin-top: 48px;
padding: 0px 20px;
}
.sidebar { /* this one here */
float: left;
left: 10px;
width: 278px;
padding-top: 48px;
padding-right: 20px;
padding-left: 20px;
background-color: #FFFFFF
}
Alas, floated DIV's are not a good solution for what you're trying to achieve - this is one of those situations where you're going to have to revert to using a multi-column TABLE or get funky with Javascript.
Remember - when you float a DIV, it is essentially removed from the page flow layout and is floated over the page's contents. Setting the height to 100% won't set the height of your column to the height of the page it floats over - it sets the height of the floated DIV to the combined height of the floated DIV's contents.
There's a pretty good description of this in "Head First HTML" from O'Reilly.
To be honest, if you want to create really controllable multi-column page designs, TABLEs are likely to be your best bet.
I find something wrong with below css ,can you fix this first.
you gave left as 10px , but didn't mention as absolute , do you want this as absolute..??
and from the screenshot , i didn't get what exactly you want can you explain it more
.sidebar { /* this one here */
float: left;
left: 10px;
width: 278px;
padding-top: 48px;
padding-right: 20px;
padding-left: 20px;
background-color: #FFFFFF
}
do the below code in window resize event
var docHeight = Math.max(
$(document).height(),
$(window).height(),
/* For opera: */
document.documentElement.clientHeight
);
var docWidth = Math.max(
$(document).width(),
$(window).width(),
/* For opera: */
document.documentElement.clientWidth
);
$("#yourdiv").css({
"height":docHeight,
"width":docWidth
});
}
Better late then never. Thought this might help:
The htmls
<div id="content">
<div id="left"></div>
<div id="right"></div>
</div>
The csss
#content { background-color: #F1EBD9; }
#left { float: left; width: 14em; }
#right { margin-left: 14em; background-color: #FFF; }
You can view this # https://github.com/gutierrezalex/two-column-layout
Related
I've written up a very basic HTML and CSS page to test out my responsive web design skills but the calculation of the padding is going wrong and I can't figure out why, any help from people would be greatly appreciated.
Below I have added my code for you to see. I have one 'main' with a 'section' and an 'aside' in it. Inside both are a box of two different sizes. I calculated the size and margin of the boxes ok but the padding won't work properly. I calculated the padding by target/context=result, which in this case for the first box is 25px padding / 500px = 0.05 (5%), and for the second box is 25px/300px= 0.08333333 (8.333333%).
However this does not cause a 25px padding but instead creates a much bigger one. When I look at the Google Chrome Developer Tool it tells me that the padding for the first box is now 56.875px and the second box is 94.797px.
I've been trying to solve this for sometime now trying different things but can't manage to figure it out.
Any help on this would be greatly appreciated. Code is below.
body, section, aside, p {
margin: 0;
padding: 0;
}
main {
width:90%; /* viewport is 1264px wide, 90% width is 1137.590px */
background-color: lightgreen;
min-height: 1000px;
margin: 0 auto;
}
section {
height: 500px;
width: 44.067133%; /* 500/1137.590 */
background-color: green;
float: left;
margin: 04.398736%; /* 50.031/1137.590 */
padding: 5%; / 25/500 */
}
aside {
height: 300px;
width: 26.434279%; /* 300/1137.590 */
background-color: blue;
float: right;
margin: 04.398736%; /* 50.031/1137.590 */
padding: 8.3333333%; /* 25/300 */
color: lightblue;
}
<body>
<main>
<section class="box-green">
<p>This is a green box</p>
</section>
<aside class="box-blue">
<p>This is a blue box</p>
</aside>
</main>
</body>
When you calculate padding in percentage, that amount is calculated by the width of the containing block, not the height.
https://developer.mozilla.org/en-US/docs/Web/CSS/padding
Padding, when given in percents, is based on the containing element not the height of the element itself.
Although this is not the correct way to write a responsive code but just to make you understand the padding % is not determined from the div size but its determined from the screen size. Also the margin you are using 4.398736% is adding on both left and right side of both the divs. Plus the padding of 5% on both side of .section and padding of 8.33333% on both side of .aside. its making the total size to 115.96555%.
For your understanding if you want both the divs (section and aside) to align side by side. Use the below written css style for both of them.
.section {
height: 500px;
width: 44.067133%;
background-color: green;
float: left;
margin: 02.199736%;
padding: 5%;
display: inline-block;
}
.aside {
height: 300px;
width: 26.434279%;
background-color: blue;
float: right;
margin: 02.199736%;
padding: 5%;
color: lightblue;
display: inline-block;
}
Hope this helps..
Jsfiddle to demonstrate my issue.
I have a SPA (Single Page Application).
In the appliation several dialogs can popup on the screen.
Every popup has it own width and height.
The title and content of the dialogs are added by angularJs
The problem i have here is the size of the dialog.
Currently all popups are made and added seperatly. I want to change this into one popup with variable content. The problem that comes with this is that the popup must wrap the contents width.
Example (as shown in the Jsfiddle)
<div class="dialog">
<div class="titlebar"></div>
<div class="content">
The content that is added has css that tells it has a width of 400px
This means the dialog needs to wrap to this 400px
</div>
</div>
How do i solve this by only using CSS?
Some examples of the variation of popups (although the width of both look the same, this is not the case)
Use display:table for the dialog.
Here is your Updated Fiddle.
For young browser you may use :
1) display:flex; property (includes centering) DEMO
.backdrop {
position: fixed;
top:0;
}
.backdrop {
width: 100%;
height: 100%;
z-index: 100;
background-color: rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
.dialog {
margin:auto;
position:relative;
}
2) max-content as value for width and not set any width to inner
content . (exept some padding to keep room for the close button) :
DEMO
Info on W3C about those new keywords value, soon avalaible i hope.
CSS updated
.dialog {
width: max-content;
z-index: 101;
margin: auto;
/* basic way t o center */
top:50%;
left:50%;
margin:-80px -150px;
}
.titlebar {
height: 50px;
line-height: 50px;
background-color: #000000;
border-radius: 10px 10px 0px 0px;
}
.title{
color:#FFFFFF;
font-size: x-large;
padding:0 50px 0 10px;
}
.close_button {
position: absolute;
right: 0px;
top: 0px;
line-height:30px;
padding: 5px;
margin: 5px;
border-radius: 10px;
background-color: #ffd549;
color: #000000;
}
.content {
background-color: #FFFFFF;
}
.content-width {
background-color:#FFF000;
}
or as already said , use the display: table, inline-table
Using display: inline-block; text-align: center;
Works in ie >= 8.
Fiddle.
I don't understand the problem.
If you want to center the content-width div element, simply add margin: auto;.
If you want the container to fit the WIDTH of its content, you must change the display property from block to something else, like inline-block or table (as suggested by #jacelysh).
What is it exactly that you are trying to do?
A div without a set width will take up the width of the parent.
try this.
.content {
background-color: #FFFFFF;
min-width: 100%;
}
.content-width {
width: 100%;
background-color:#FFF000;
}
http://jsfiddle.net/VQA4k/6/
Checking again now. You can just remove the width from those two classes and it will work.
This is what you want I think.
http://jsfiddle.net/VQA4k/16/
I'm new to working with divs, so I'm not too good at using them. I'm making a music blog, and I want the user to be able to see the picture for the post, and arrows on either side to go to next or previous posts. I'm having trouble centering the arrows in my parent div.
I searched a few things online, but nothing seemed to work. Here is my css for a simple test...
#picture_wrapper {
width:550px;
background-color:#00F;
float:left;
}
#picture_container {
width: 500px;
float: left;
padding-left:5px;
padding-right:5px;
}
#left_arrow_container {
float: left;
top:50%;
width: 20px;
height:100%;
background-color: #F00;
}
#right_arrow_container {
float: right;
top:50%;
width: 20px;
height:100%;
background-color: #F00;
}
I set the arrow divs to have a background color of red, and I thought with this code the entire right and left sides would be red, but this is not the case. Only the area around my image is red. Here is the html that I am using.
<div id="picture_wrapper">
<div id="left_arrow_container"><img src = 'http://www.startingtofeelit.com/images/slider_left_arrow.png' width = '20' height = '34px'/></div>
<div id="picture_container"><center><img src = 'http://www.startingtofeelit.com/wp-content/uploads/2012/07/DIIV+zachacry+cole+smith2.jpg' width = '500' /></center></div>
<div id="right_arrow_container"><img src = 'http://www.startingtofeelit.com/images/slider_right_arrow.png' width = '20' /></div>
</div>
Here is how it is being displayed on my Dreamweaver now...
pic1 http://www.startingtofeelit.com/images/pic1.png
Here is how I more or less want it to be displayed...
pic2 http://www.startingtofeelit.com/images/pic2.png
Thanks for the help.
Sounds like a job for vertical-align: middle;.
http://jsfiddle.net/Wexcode/Lp5M9/2/
#picture_wrapper {
background: #F00;
float: left;
font-size: 0;
white-space: nowrap; }
#left_arrow_container, #right_arrow_container {
height: 100%;
vertical-align: middle;
display: inline-block; }
#picture_container {
background: #00F;
padding: 0 5px;
vertical-align: middle;
display: inline-block; }
Let me know if you have any questions.
I prefer using absolute and relative position :), pretty much what I saw you were trying to achieve in your css, in order to top, left, right and bottom to work you must set a position (absolute, relative or fixed) and use your arrows as backgrounds
http://jsfiddle.net/wQqfp/2/
Basically I can't get the div that holds all the content to move down with the content itself. If I take out the fixed height on the comborder div it disappears. The content remains in place, though over the bg image. Does anyone see any solution to this? I've tried a whole lot and can't come up with anything. I just want to base the height of the content div on the height of the content, like a div usually works. Thanks a bunch!
Here's the site: http://www.drdopamine.com/kineticaid/community.php?page=profile&id=1
Here's the relevant CSS:
.wrap {margin: 0 auto; }
.abs { position:absolute; }
.rel { position:relative; }
div.comborder {
width:900px;
height:600px;
background-image: url(http://www.drdopamine.com/kineticaid/pics/bg.jpg);
-moz-border-radius: 30px;
border-radius: 30px;
z-index: 10;
}
div.comcon {
background-color: white;
top: 25px;
right: 25px;
bottom: 25px;
left: 25px;
-moz-border-radius: 15px;
border-radius: 15px;
z-index: 11;
}
Here's the relevant HTML:
<div class="comborder wrap rel" style="margin-top:100px;opacity:0.9;z-index:80;">
<div class="comcon abs" style="opacity:none;">
<div class="comhold rel" style="height:100%;width:100%;border:1px solid transparent;">
<?php
if($_GET['page'] == "profile") {
include_once('profile.php');
}
if($_GET['page'] == "editprofile") {
include_once('editprofile.php');
}
?>
</div>
</div>
</div>
Do this:
body.combody {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("http://www.psdgraphics.com/file/blue-sky-background.jpg");
background-origin: padding-box;
background-position: left center;
background-repeat: repeat;
background-size: 110% auto;
height: 100%;
}
div.comborder {
background-image: url("http://www.drdopamine.com/kineticaid/pics/bg.jpg");
border-radius: 30px 30px 30px 30px;
height: 100%;
width: 900px;
z-index: 10;
}
What is important to notice is that both the body and the div have a 100% height.
That might help you.
Absolute positioning removes the content div (and everything else) from the flow of the page. That makes it so the containers don't know the size of the inner elements.
Remove all the .abs classes from everything inside the container, and the white background will correctly stretch as you want. However, it also stretches over the black border, so you'd have to find different way to create it.
More general advice:
.wrap {margin: 0 auto; }
.abs { position:absolute; }
.rel { position:relative; }
These are just plain bad ideas. It looks like you saw or were told about always putting CSS into a CSS file and never in HTML; a good idea when done right, but classes should identify content, not styles. For example:
.sidebar-image { /* css here */ }
.sidebar-donate ( /* css here */ }
.sidebar-infobox { /* css here */ }
It creates duplicate position: tags and so on, but it's also much easier to understand and much easier to get the results you want, since fixing your current problem involves editing the HTML when it should be a CSS problem.
I usually have my structure laid out something like this:
<div id="all">
<div id="page">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</div>
Where the body will hold a background pattern, "all" will hold a dropshadow for the page going up and down, and "page" may often have a repeating-y background as well.
I have tried variations on using the css height/min-height properties:
html, body {
height:100%;
...
}
#all {
height:100%;
min-height:100%;
}
#page {
height:100%;
min-height:100%;
height:auto !important;
}
It seems like if I remove height:auto from "all" then it seems like it works UNTIL you scroll, then after the scroll the background for all dissappears
example
However if I keep the height:auto there then I get the problem of the background for page not working
example
Hopefully someone knows a fix?
Well, here's what I ended up with for the CSS:
html, body {
height:100%; /* IE6: treaded as min-height*/
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
color: #494949;
text-align: center;
background-color: #3f91a7;
background-image: url(images/bg_body.jpg);
background-repeat: repeat-x;
background-position: center top;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#all {
margin: 0px;
padding: 0px;
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
height:auto !important;
background-image: url(images/bg_all.png);
background-repeat: repeat-y;
background-position: center top;
overflow: hidden;
}
#page {
width: 993px;
padding: 0 0 10000px;
margin-top: 0px;
margin-right: auto;
margin-bottom: -10000px;
margin-left: auto;
text-align: left;
background-color: #FFF;
background-image: url(images/bg_page.jpg);
background-position: center top;
background-repeat: repeat-y;
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
height:auto !important;
}
#header, #footer {
text-align: center;
font-size: 16px;
padding: 20px;
}
#content {
padding: 25px;
}
I haven't had a chance to test it in anything other than Firefox, but, hoipefully it will give you a good start.
I would just flip the location of your div#all and div#page...
<div id="page">
<div id="all">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</div>
Although the question was posted some years ago, I ran into the same challenge and found this earlier thread today. Although I reckon there might be more fine solutions by now, I wanted to share the one I found today nevertheless.
Had the same problem, background 1 full screen, adaptive and fully below everything else and another repeating(-y) background number 2 should go on top, but not scroll out of sight because it was set to follow the height of the window which was given to the particular div which holds background 2.
Let's start with the divs I created:
<div id="full_background">
<img src="images/bkg_main.jpg" alt="" />
<div id="absolute">Contains background set to repeat-y</div>
<div id="content">Contains the content</div>
</div>
the css looks like this:
* { margin: 0px; padding: 0px; }
html { height: 100%; }
body { height: 100%; }
#full_background { width: 100%; min-height: 100%; position: relative; float: left; }
#full_background>img { position: absolute; top: 0; left: 0; position: fixed; width: 100%; z-index: 1; display: block; }
#full_background>div { position: relative; z-index: 2; }
#absolute { position: fixed !important; left: 0; width: 100%; height: 100%; background: url("../images/bkg2.png") top left repeat-y; }
#content { width: 290px; margin-left: 20px; padding: 30px; line-height: 1.7em; font-family: 'Lato', sans-serif; position: relative; float: left; }
First off, I added a full screen & resizing background image to my site (using the div full_background and the img tag) using the following solution (very easy css solution which works like a charm in every browser and most older versions down to for example IE7) - http://www.webdeveloper.com/forum/archive/index.php/t-256494.html > see last answer by aj_nsc
Next, using the following jQuery method - http://nicholasbarger.com/2011/08/04/jquery-makes-100-height-so-much-easier/ - I created a div with id = absolute, which is given the same height as the browser window (also on resizing). I placed my repeating(-y) background number 2 in here. Set this div to position:fixed and it will stay put when the div with the content is being scrolled through.
Then below this div you put the div with your content, which freely expands downwards beyond the browser window.
Upon scrolling, the two backgrounds will keep filling the full area of the browser window (vertically as well) at all times and stay put, with the content scrolling up and down over them.
This way, upon resizing, you also make sure that both backgrounds keep filling the full background area at all times.
I tested this solution in CH, FF, IE7-9 and Safari and it worked in all of them without any problems whatsoever.
Here's what's happening: You've set html & body to have a height of 100%, but that 100% is the height of the viewport, not the document. Since #all's height is set to 100%, it is set to 100% of the parent's height, which happens to be body, which is set at 100% of the height of the viewport. Everything's inheriting the height of the viewport.
The way to fix this problem is actually the same way you would fix clearing floats that have an outer container. All you have to do is put overflow:auto; on #all. You don't even need any height declarations on any other elements, and you may be able to eliminate either the #all or the #page div.
More info here: http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
Have you tried:
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#all {
min-height: 100%;
}
? Only for IE 6, you should set height: 100%; for #all (because it interprets that basically as min-height (as a result of a bug). As IE6 doesn't understand the min-height attribute, height effectively becomes a replacement for min-height).
If you set height: 100%; for other browsers, they will take it as 100% height of the viewport, not 100% of the page, so scrolling won't work correctly.
My comment on the downvote:
It has become clear, that my answer doesn't solve the whole problem. What we have here, seems to be quite a complex case - at least no one here seems to have found an answer yet? I've even looked into Ingo Chao's excellent (German) book, which comes to the same conclusion: Setting the parent's height won't work, and setting the child's height won't work, if the parent's height wasn't set explicitly, but rather dynamically by the size of the content.
But my answer could still help to restrict the possibilities a little bit - because setting height on #all will most likely not work on any browser except IE 6. If you disagree, please post a comment, because in that case, I'd also like to learn more about this.
This worked for me:
#page {
width: 993px;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: left;
background-color: #FFF;
background-image: url(http://jeffkilroy.com/hosted/layout1/images/bg_page.jpg);
background-position: center top;
background-repeat: repeat-y;
/* height:100%; IE6: treaded as min-height*/
height: expression(document.body.offsetHeight); /* sets min-height for IE */
overflow: auto;
min-height:100%; /* real browsers */
/* height:auto !important; */
}
Forget 100% on the divs, try moving your background image to the html element and the full height border to the body.
html {
height:100%;
background-color: blue;
}
body {
margin: auto auto;
padding: 0;
color: #494949;
/*min-height: 100%; */
height:100%; /*for ie6*/
border-left:solid 2px red;
border-right:solid 2px red;
background-color:#fff;
width: 960px;
}
Have you tried this :
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
window.onload = init;
function init(){
document.getElementByID("all").style.height = getWindowHeight() + "px";
}
Or put page instead of all