So, right to the point, here's what I want (minus the poor quality)...
http://www.hbperspective.com/alt3/site.jpg
And here's what I've got...
http://www.hbperspective.com/alt3/
I'm trying to get those two transparent columns to be centered as they are in the pic. With this CSS layout I'm having a heck of a time figuring out how to do that without causing all kinds of other problems. Here is my styling...
* {
padding: 0;
margin: 0;
}
body {
background: #000000 url('background_div.png') repeat-y center top;
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
margin: 0 auto;
}
#wrapper {
background: url('background_header_transparent.png') no-repeat center top;
width: 100%;
display: table;
overflow: hidden;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
background: #000000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
.container {
float: left;
position: relative;
margin-top: 100px;
}
.content {
position: relative;
float: left;
}
#contentColumn{
width: 540px;
}
#sidebarColumn {
width: 190px;
margin-left: 20px;
float: left;
display: inline;
}
#contentColumn .content {
width: 500px;
padding: 10px;
}
#sidebarColumn .content {
width: 170px;
padding: 10px;
}
* html #contentColumn .overlay { height: expression(document.getElementById("contentColumn").offsetHeight); }
* html #sidebarColumn .overlay { height: expression(document.getElementById("sidebarColumn").offsetHeight); }
The markup is pretty simple, probably be just easier to look at it from the link provided. So, like I said I'm not really sure what to do at this point to get it working the way I want. Any ideas?
div#container {
width:500px; /* Same width as both columns */
margin:auto; /* Will center the container */
}
div#col1 {
float:left; /* allows side-by-side columns */
width:250px;
}
div#col2 {
float:left;
width:250px;
}
div.clear {
clear:both; /* Stops columns from extending past border of container */
}
<div id="container">
<div id="col1"></div>
<div id="col2"></div>
<div class="clear"></div>
</div>
And for extra credit, avoid using expressions :) Instead, perform any needed logic like that with javascript, via a framework like jQuery.
There are so many gotchas creating CSS columns I would suggest using a framework instead of rolling your own. There are lots of gotchas which are browser defendant and that you may not see unless you check in IE, FF, Safari, Opera, etc.
A few good frameworks are:
YUI Grids
Blueprint CSS
Blocks (new experimental)
Rules for centering things in CSS:
The thing you're centering must be assigned a width
The margins on that block must be assigned to auto
I have it working on your site in FF3 and IE7 using
div#wrapper {
width:800px;
margin: auto;
}
div#contentColumn
{
margin-left: 20px;
}
If you want to fix up the logo (see top right) then add an extra container div immediately inside the wrapper, and apply the above width/margin to the container (as suggested by Jonathan Sampson.)
Related
I took a pricing table HTML/CSS/JS that I found and decided to try and bend it to fit my desires for a given page. Unfortunately I've hit a bit of a wall. The following fiddle is a bare-bones example of the HTML and CSS for the table at the moment:
https://jsfiddle.net/jv89hopf/1/
In order to make the columns evenly space out across the width of the page regardless of the number of columns I used display:table, table-layout:fixed, and display:table-cell. This works perfectly and as I add or remove columns the table adjusts as necessary to fill the space
Now the problem is when one column is taller than the others. I would like all columns to stretch to match the height of the tallest one.
When looking in the Chrome inspector I can see that the table-cell has filled the height entirely:
Now all I need is for the child of this table-cell to fill the height (in the Fiddle provided above, this would be .price-wrapper - and it needs to fill .price-list li)
I have tried both:
height: 100%
position: absolute; top:0; bottom:0; left:0; right:0;
The former does nothing for some reason, and the latter collapses .price-list down to 0 pixels tall (since the only children with height are absolutely positioned and therefore removed from the flow)
If I can get .price-wrapper to be properly 100% of the height of .price-list li then I can use display:table and display:table-row to push the "Buy now" button to the bottom and get the desired appearance:
One solution is give 100% height to .price-list, .price-list > li and .price-wrapper will make child height fit to content.
.price-list {
display: table;
height: 100%; //Here
list-style: outside none none;
margin: 0;
padding: 0;
table-layout: fixed;
width: 100%;
}
.price-list > li {
display: table-cell;
padding: 0 10px;
height:100%; //Here
}
.price-wrapper {
background-color: #fff;
height: 100%; //Here
list-style: outside none none;
margin: 0;
padding: 0;
}
Working Fiddle
some css changes
body {
background-color: #999;
}
.monthly.is-visible {
height: 100%;
margin-bottom: 18px;
position: relative;
}
.is-visible footer {
background-color: #99c;
bottom: 0;
height: 30px;
position: absolute;
width: 100%;
}
.price-list {
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.price-list > li {
display: table-cell;
padding: 0 10px;
height:100%;
}
.price-wrapper {
background-color: #fff;
list-style: none;
height:100%;
margin: 0;
padding: 0;
}
.is-visible footer {
width: 100%;
height: 30px;
background-color: #99c;
}
/* For demonstration purposes */
.is-hidden {
display: none;
}
https://jsfiddle.net/jv89hopf/3/
I have a solution using jQuery. It works like this. When the page loads, it looks for each list and determines the largest among all lists. Then it takes that height and stretches others accordingly. The code looks like;
var height = 0;
$("main").each(function( index ) {
if(height<$(this).height()){
height = $(this).height()
}
});
$("main").height(height);
Here is a demo
I'm struggling to understand divs.
I want to have the 'nav' panel expand vertically as required. The second issue I have is that I can't seem to get padding to work. Any changes I make tend to end up with the 'section' div drop below the 'nav' div.
Please see below jsfiddle and code.
Thanks in advance.
https://jsfiddle.net/s59cwy9s/
<div id="container">
<div id="nav">
test
</div>
<div id="section">
test
<br><br><br><br>
test
<br><br><br><br>
test
</div>
</div>
#container
{
width: 1156px;
margin-top: 0;
margin-left: auto;
margin-right: auto;
box-shadow: 5px 5px 10px rgb(0,0,0);
position: relative;
background-color: transparent;
height: auto;
}
#header
{
background-color:black;
color:white;
text-align: center;
padding:5px;
}
#nav
{
line-height:30px;
background-color:#eeeeee;
min-height: 100px;
min-width: 80px;
float:left;
padding: 15px;
display: inline-block;
height: auto;
}
#section
{
/*float: none;*/
padding: 10px;
display: block;
/*position: absolute;*/
/*overflow: auto;*/
background-color: white;
width: auto;
height: auto;
}
This may be due to the fact that your name bar doesn't span the height of the webpage completely. Try something like height :100% for the navbar. It might do the trick.
Here is some help :
https://jsfiddle.net/6ubhyL5k/
Some advices :
Take time to really understand how the page flow works (float : left/right) so you will then understand how padding and margin work when you have floating div
Use what you really know and don't improvise :)
Don't use br to make spaces between blocks (margin and padding are what you should use)
Take a look at how bootstrap works and never forget the responsive design
First I will recommend is using box-sizing attribute
It contains any type of padding or borders within the container's width and height. Find more about it Here. So i suggest:
*
{
box-sizing:border-box;
/* Use browser prefixes if u want support for other browsers */
}
Second is add a class to the container which contains elements wit float css attribute like clearfix and add this code:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
or you can just create a div after the container containing elements with float css attribute and clear it.
<div class='clear'></div>
.class
{
clear:both;
}
Using float as much as it is useful brings about a problem in layout if not properly used. https://css-tricks.com/all-about-floats/
My Solution:
html,body {height:auto; width:100%; background:red; }
* { box-sizing:border-box; margin:0; padding:0; display:block; position:relative; }
#container
{
min-width:800px;
height:auto;
margin:0 auto;
width:100%;
}
#nav
{
float:left;
width:30%;
padding: 15px;
line-height:30px;
background-color:#eeeeee;
min-height: 100px;
min-width: 80px;
background:white;
}
#section
{
float:left;
width:70%;
padding:0 100px;
background:yellow;
}
.clearfix:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
Hope It Helps You. Though i recommend researching more on layouts since there's other layout which will give you less problem than floats.
Try
#section{
clear:both;
}
JSfiddle
clear:both allows floated divs to stop continuing on the same line with the other floated ones, and drop below.
Update: https://jsfiddle.net/s59cwy9s/2/
You could fix your issue by giving a margin-right to the #nav
I want to place two pictures at the same place on the webpage - to overlay each other (later on I'll add some webkit animations for them to move in two different directions, but the startpoint should be the same). I have the following css layout (here's jsfiddle). The CSS here looks like this:
.intro{
background-color: #b0e0e6;
width: 100%;
margin: 0 auto;
font-size: 1.5em;
padding: 5px;
}
.intro:before,.intro:after {
content: " ";
display: table;
}
.intro:after {
clear: both;
}
.image{
width: 50%;
background-color: #aaaae6;
float: left;
}
img{
margin: 0 auto;
display: block;
}
.text{
width: 50%;
background-color: #cccccc;
float: left;
}
as you can see in the fiddle, now two pictures are one below the other, so I've decided to modify the css and add this:
img{
margin: 0 auto;
display: block;
position:absolute;
left: 10%;
top: 25%;
}
but that causes the not visible at all... How can I preserve the size of that div and just put two images directly in it?
As a starting point for consideration: in CSS3, a single element can have multiple, stacked background images. Example:
.my-container {
background:
url(grid.png),
url(building.jpg)
}
Here's a codepen.
In CSS2 and below, you can use z-index, absolute, width, and height etc.
Trying to stack 3 DIVs vertically, so that the top DIV is 25% of screen height, middle is 50%, and bottom is 25%, but they seem to extend the screen and I end up having a scrollbar.
body,html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#top {
width: 100%;
height: 25%;
background: #464646;
}
#middle {
width: 100%;
padding: 15px 0 15px 0;
margin: 0 auto 0 auto;
min-width: 657px;
height: 50%;
text-align: center;
vertical-align:middle;
}
#bottom {
width: 100%;
padding: 15px 0 15px 0;
height: 25%;
background: #988056;
}
<div id="top"></div>
<div id="middle"><img src="logo.png"></div>
<div id="bottom"></div>
As Hashem mentions in a comment above, box-sizing: border-box is considered best practice nowadays. Add the following to your CSS and you should be good to go:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
Here is a good read-up for you.
That said, if you are working on an existing product and have lots of legacy code that would be broken if you did this, you need to work around the margins and paddings on your site sections, they add height, and that makes it all add up to more than 100%.
And if you are uncomfortable with that as well, look up flex-box layout. Only works in modern browsers though, so don't do it if you need old IE support.
This is due to the padding that you have added to middle and bottom divs.
The width and height styles always specify the width/height of textual area i.e. width/height of the "div's content" and they do NOT include the padding value. The padding is an extra space added apart from the width/height.
Try the following, and it should give you the desired results:
HTML:
<div id="top"></div>
<div id="middle"><img src="logo.png"></div>
<div id="bottom"></div>
CSS:
body,html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#top {
width: 100%;
height: 25%;
background: #464646;
}
#middle {
width: 100%;
margin: 0 auto 0 auto;
min-width: 657px;
height: 50%;
text-align: center;
vertical-align:middle;
}
#bottom {
width: 100%;
height: 25%;
background: #988056;
}
Working LIVE.
The CSS flexbox layout module is especially made to handle requirements like this.
You can use the flex-grow property:
The flex-grow property is a sub-property of the Flexible Box Layout module.
IT defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.
For example, if all items have flex-grow set to 1, every child will set to an equal size inside the container. If you were to give one of the children a value of 2, that child would take up twice as much space as the others.
*{
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
#container{
-webkit-display:flex;
-moz-display:flex;
-ms-display:flex;
display:flex;
-webkit-flex-direction:column;
-moz-flex-direction:column;
-ms-flex-direction:column;
flex-direction:column;
height:100%;
}
#top {
-webkit-flex:1;
-moz-flex:1;
-ms-flex:1;
flex:1;
background: #464646;
}
#middle {
-webkit-flex:2;
-moz-flex:2;
-ms-flex:2;
flex:2;
background:dodgerblue;
}
#bottom {
-webkit-flex:1;
-moz-flex:1;
-ms-flex:1;
flex:1;
background: #988056;
}
<div id="container">
<div id="top"></div>
<div id="middle"></div>
<div id="bottom"></div>
</div>
In this scenario, since you're concerned about screen height, you might want to investigate the 'vh' css rule.
For instance, if you wanted to stack your top, middle, and bottom evenly, you could do it with pure css:
#top, #bottom, #middle {
height: 32vh;
}
Or, as pertains to the question:
#top { height: 25vh; }
#middle { height: 50vh; }
#bottom { height 24vh; } /*24 vh so you have a little wiggle room*/
Examine here:
body { margin : 0; padding: 0}
div { border: #ccc solid 1px; }
#top { height: 25vh; }
#middle { height: 50vh; }
#bottom { height: 24vh; }
/*24 vh so you have a little wiggle room*/
<div id="top">top</div>
<div id="middle">middle</div>
<div id="bottom">bottom</div>
<div class="dd">
<div class="blue" style="WIDTH:$s%">$s%</div>
<div class="green" style="WIDTH:$v%">$v%</div>
<div class="red" style="WIDTH:$g%"><br>$g%</div>
</div>
In FF the three different elements are displayed on a single status bar, showing the accumulation of the quantities. However, in IE, it's all messed up. I get separate bars for each element and the colors and alignment are all off.
The CSS:
/*These are for multiple element types on same status bar */
div.dd {
/*position: relative; /* IE is dumb */
display: block;
float: left;
width: 500px;
height: 16px;
margin: 0 0 2px;
background: url("white3.gif");
margin-left:20%;
}
div.dd div.blue {
/*position: relative; */
background: url("blue.gif");
height: 16px;
width: 75%;
text-align:right;
display:block;
float: left;
}
div.dd div.red {
/*position: relative; */
background: url("red.gif");
height: 16px;
width: 75%;
text-align:right;
display:block;
float: left;
}
div.dd div.green {
/*position: relative; */
background: url("green.gif");
height: 16px;
width: 75%;
text-align:right;
display:block;
float: left;
}
What are $s, $v and $g doing in your HTML; and the <br>, for that matter?
If I remove the <br>, and replace those $ values by actual percentages that add up to 100% it works just fine for me in IE6, except for the left margin. But that's caused by the doubled float-margin bug.
The way to fix that margin, according to that article, is to set the display property on div.dd to inline.
Speaking of which, you can remove all those display: block properties you're using, because the display property is ignored for floats (except by IE, to some extent, as the above bugfix demonstrates).