i need your assistance. I am using the below design, but want to set it so that at a set size the columns will no long compress\shrink. I have tried setting "min-width", but just cant get it to work. Please help.
http://matthewjamestaylor.com/blog/equal-height-columns-4-column.htm
Thanks in advance,
Edit: Code added.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style media="screen" type="text/css">
/* <!-- */
body {
margin:0;
padding:0;
}
#header h1,
#header h2,
#header p {
margin-left:2%;
padding-right:2%;
}
#active2 #tab2,
#active3 #tab3,
#active4 #tab4,
#active5 #tab5 {
font-weight:bold;
text-decoration:none;
color:#000;
}
#footer {
clear:both;
float:left;
width:100%;
}
#footer p {
margin-left:2%;
padding-right:2%;
}
/* Start of Column CSS */
#container4 {
clear:left;
float:left;
width:100%;
overflow:hidden;
background:#b2f0f9; /* column 4 background colour */
}
#container3 {
clear:left;
float:left;
width:100%;
position:relative;
right:25%;
background:#89ffa2; /* column 3 background colour */
}
#container2 {
clear:left;
float:left;
width:100%;
position:relative;
right:25%;
background:#ffa7a7; /* column 2 background colour */
}
#container1 {
float:left;
width:100%;
position:relative;
right:25%;
background:#fff689; /* column 1 background colour */
}
#col1 {
float:left;
width:21%;
position:relative;
left:77%;
overflow:hidden;
}
#col2 {
float:left;
width:21%;
position:relative;
left:81%;
overflow:hidden;
}
#col3 {
float:left;
width:21%;
position:relative;
left:85%;
overflow:hidden;
}
#col4 {
float:left;
width:21%;
position:relative;
left:89%;
overflow:hidden;
}
/* --> */
</style>
</head>
<body id="active4">
<div id="header">
HEADER CONTENT
</div>
<div id="container4">
<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1">
<!-- Column one start -->
<h2>Equal height columns</h2>
<p>It does not matter how much content is in each column, the background colours will always stretch down to the height of the tallest column.</p>
<!-- Column one end -->
</div>
<div id="col2">
<!-- Column two start -->
<h2>No Images</h2>
<p>This four column layout requires no images. Many CSS website designs need images to colour in the column backgrounds but that is not necessary with this design. Why waste bandwidth and precious HTTP requests when you can do everything in pure CSS and HTML?</p>
<!-- Column two end -->
</div>
<div id="col3">
<!-- Column three start -->
<h2>Valid XHTML strict markup</h2>
<p>The HTML in this layout validates as XHTML 1.0 strict.</p>
<!-- Column three end -->
</div>
<div id="col4">
<!-- Column four start -->
<h2>Cross-Browser Compatible</h2>
<p>This 4 column layout has been tested on the following browsers:</p>
<!-- Column four end -->
</div>
</div>
</div>
</div>
</div>
<div id="footer">
FOOTER CONTENT
</div>
</body>
Would be interestin waht you tried to see where your error is.
When i add the background colors and min-width to col1, ... it works for me:
#col1 {
background: none repeat scroll 0 0 blue;
float: left;
left: 77%;
min-width: 200px;
overflow: hidden;
position: relative;
width: 21%;
}
Related
I have this template that we have been given to edit, all I want it to insert a top header div with a height of 25px and background colour, which I did, but it won't align correctly at all. I took it outside the wrapper, and increased it's width, but it still aligns slightly right.
I've added the original template below -
<head>
<title>[DOCUMENT_TITLE]</title>
</head>
<body>
<div id="pdfdoc">
<div id="wrapper">
<div id="header">
<div id="logo"><center><img src="[LOGOFILE]"></center></div>
<div class="sender-address">
<div class="sender-address-company">[SENDER_ADDRESS_COMPANY]</div>
<div class="sender-address-line1">[SENDER_ADDRESS_LINE1]</div>
<div class="sender-address-line2">[SENDER_ADDRESS_LINE2]</div>
<div class="sender-address-line3">[SENDER_ADDRESS_LINE3]</div>
<div class="sender-address-line4">[SENDER_ADDRESS_LINE4]</div>
<div class="sender-address-postcode sender-address-line4">, </div>
<div class="sender-address-postcode">[SENDER_ADDRESS_POSTCODE]</div>
</div>
<div id="header-info">
<div id="vat-registration-info">[VATNUMINFO]</div>
<div class="sender-address-phone">T: [SENDER_ADDRESS_PHONE]</div>
<div class="sender-address-email">E: [SENDER_ADDRESS_EMAIL]</div>
</div>
<div class="cl" id="logo_clearer"></div>
</div>
</div>
</body>
</html>
CSS
html {width:793px;}
*,html,body{ font-family:[FONT]; color:[FONTCOLOR]; }
body {
font-size:[FONTSIZE]px;
}
#wrapper {
margin:0 40px 0 40px;
}
#pdfdoc {
font-size:1.1em /*increase font size for everthing from user-set body pt size */
}
/* header */
#pdfdoc #header{
margin-top:2em;
border-bottom:1px solid #E5E5E5;
padding-bottom:24px;
margin-bottom:48px;
position:relative;
}
#logo{
float:left;
margin-right:24px;
margin-left:24px;
text-align:center;
vertical-align: middle;
}
.sender-address {
font-size:1.1em;
float:left;
}
.sender-address-company{ font-weight:bold;font-size:1.1em;}
.sender-address-line4{ float:left;}
.sender-address-potcode{ float:left;}
#header-info{
float:right;
text-align:right;
position:absolute;
bottom:0; right:0;
margin-bottom:24px;
}
#header-info div{ color:#808080; }
#pdfdoc #header div a:link{ text-decoration:none; color:#808080;}
How can I get the added Div centrally aligned in template?
http://jsfiddle.net/5RhFq/16/ - looks fine on here but on here - https://app.kashflow.com/v2/documents/invoice/89BAFB30-CF7C-4A14-98C3-37BD6D8C14CC?media=0&theme=396345 It doesn't.
body {
margin:70px auto;
font-size:[FONTSIZE]px;
}
I have a problem with aligning images in div which is floated to left.
in the code below how to align "logo.jpg" to center vertically and horizentally?
Thank you.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" />
<title>layout</title>
<style type="text/css">
body,div,ul,li,dl,dt,dd,ol,p,h1,h2,h3,h4,h5,h6,form {font-size:11px; margin:0;padding:0;line-height: 150%;}
ul,ol,dl {list-style:none}
img {border:0;vertical-align:top;}
ul {list-style:none; padding:0; margin:0;}
#_layout {margin:0 auto; width:980px;}
#_top_cntr {width:980px; height:150px; background:#fff; margin-bottom:10px;}
/* top_cntr */
#_brand {height:110px; background:url(images/top_bg.jpg);}
#_left_logo {width:280px; height:110px; float:left; padding-left:10px;}
#_right_logo {width:680px; height:110px; float:right; margin-left:10px;}
</style>
</head>
<body>
<div id="_layout">
<div id="_top_cntr">
<div id="_brand">
<div id="_left_logo">
<img src="images/logo.jpg"/>
</div>
<div id="_right_logo">
</div>
</div>
</div>
</div>
</body>
</html>
you have to use vertical-align: middle but as it works only on element with display: table-cell you need to add it also, like in this example (I have modified the style of #_left_logo).
You can take a look at this article, there are a couple of other methods how you can vertically center the content of your div
I think this would typically be done through CSS.
<div id="_brand">
<a id="_left_logo" class="img-replacement"> <!-- best practice to make the logo a link -->
Now you can even throw text Here as a fall back when the image doesn't work
</a>
<div id="_right_logo">
</div>
</div>
And then:
.img-replacement {
display: block;
text-indent: -9999px;
}
#_left_logo {
width:280px;
height:110px;
float:left;
padding-left:10px;
/* and then: */
background: url("/images/logo.png") center center no-repeat;
}
If you know the height of the height of the image, you can do it with position: absolute. For example, image size 200x60.
#_left_logo {width:280px; height:110px; float:left; padding-left:10px; position: relative;}
#_left_logo img {width:200px; height:60px; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -30px; }
I cant figure out what is wrong with my styles.
Hope someone could help me with this.
Code example:
<style type="text/css">
.maindiv {
overflow:hidden; border:#000 1px solid;
width:450px; min-height:250px;
}
.left_inner {
float:left; width:200px;
min-height:100%; background:#00CC33;
}
.right_inner {
float:left; width:150px; background:#C93;
}
</style>
<div class="maindiv">
<div class="left_inner">Left Block content</div>
<div class="right_inner">Right block content<br />sample txt<br />sample txt</div>
</div>
The way it should be is like in Opera Browser (see image):
The How
http://jsfiddle.net/L9GEa/
The Why
One might intuitively assume (as I once did) that the html element already has a determined height, but it does not (at least in this context). Luckily (or by design) this one element has the unique property of it's height being determinable when it is assigned a percentage height. That is the essential concept because in order to calculate (determine) the height of any other element which is assigned a percentage height you must also be able to determine the height of it's parent.
Anyone that has worked with CSS and the DOM enough likely will tell you they hate floats. This is because it pulls the element out of the flow, which requires additional work and thinking to juggle the effects. Instead use display:inline-block;vertical-align:top; with the one caveat that you will then have to add html comments around any white space between those elements.
The CSS
.maindiv {
overflow:hidden; border:#000 1px solid;
width:450px;min-height:250px;
/*changes*/
height:100%;
}
.left_inner {
float:left; width:200px;
min-height:100%; background:#00CC33;
/*changes*/
float:none;
display:inline-block;
vertical-align:top;
}
.right_inner {
float:left; width:150px; background:#C93;
/*changes*/
float:none;
display:inline-block;
vertical-align:top;
}
/*changes*/
html,
body{
height:100%;
}
The HTML
<div class="maindiv">
<div class="left_inner">Left Block content</div><!--
--><div class="right_inner">Right block content<br />sample txt<br />sample txt</div>
</div>
add
html,
body {
height:100%
}
at the top of your css, that works for me
EDIT: my test :
<!DOCTYPE html>
<html>
<head>
<style>
html,
body {
height:100%;
}
.maindiv {
overflow:hidden; border:#000 1px solid;
width:450px; height:100%;
position:relative;
}
.left_inner {
float:left; width:200px;
min-height:100%; background:#00CC33;
position:relative;
}
.right_inner {
float:left; width:150px; background:#C93;
}
</style>
</head>
<body>
<div class="maindiv">
<div class="left_inner">Left Block content</div>
<div class="right_inner">Right block content<br />sample txt<br />sample txt</div>
</div>
</body>
</html>
Try this:
<style type="text/css">
.maindiv {
overflow:hidden; border:#000 1px solid;
width:450px; height: auto; min-height:250px;
}
.left_inner {
float:left; width:200px;
min-height:100%; height: 100%; background:#00CC33;
}
.right_inner {
float:left; width:150px; background:#C93;
}
</style>
<div class="maindiv">
<div class="left_inner">Left Block content</div>
<div class="right_inner">Right block content<br />sample txt<br />sample txt</div>
</div>
Most of the time you have to apply a height of auto or 100% to the parent DIV.
If i am right display:inline should display div on the same line without any line break. This is my web page where display:inline simply makes my div invisible:
<html>
<head>
<style type="text/css">
.body{
max-width:3072px;
min-width:3072px;
margin:0px auto;
background:#293231;
}
.page1{
background:url('Main.jpg') no-repeat;
width:1024px;
height:211px;
}
.page2{
background:url('Page2.jpg') no-repeat;
width:1024px;
height:211px;
display:inline;
}
.page3{
background:url('Page3.jpg') no-repeat;
width:1024px;
height:211px;
display:inline;
}
.wrapper{
display:block;
width:100%;
height:auto;
}
</style>
</head>
<body class="body">
<div class="wrapper">
<div class="page1">
</div>
<div class="page2">
</div>
<div class="page3">
</div>
</div>
</body>
</html>
I can see divs with class = page1, but page2 and page3 are invisible.
A non-block element can't have height/width specified like that (and with no content inside, it'll have nothing to give it size) - instead you want inline-block, like this:
display: inline-block;
You can see a full list of options for display here
Unfortunately, display: inline-block is not supported by older versions of IE. You can do this by floating your three inner div tags left, and undoing the float on the containing element. Here is the complete example (see my comments for the relevant changes):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.body { max-width:3072px; min-width:3072px; margin:0px auto; background:#293231; }
.page1{ background:url('Main.jpg') no-repeat; }
.page2 { background:url('Page2.jpg') no-repeat; }
.page3{ background:url('Page3.jpg') no-repeat; }
/* These next two lines are my changes. */
/* Float these guys left */.page1, .page2, .page3 { width:1024px; height:211px; float: left; }
/* Add overflow: hidden to "undo" the floating */.wrapper{ overflow: hidden; width:100%; height:auto; }
</style>
</head>
<body class="body">
<div class="wrapper">
<div class="page1">
</div>
<div class="page2">
</div>
<div class="page3">
</div>
</div>
</body>
</html>
I want to create fixed footer but , is it possible with 960 gs , because I am having trouble with height of container div . I can no set it to %100.
<div class="container_12" >
<div class="grid_3" id="side-space"></div>
<div class="grid_6">
<div id="content-box"></div>
</div>
<div class="grid_3" id="side-space"></div>
</div>
I don't believe 960.gs has much to do with height.. it just deals with columns and clearing. Nice framework to start with. Try setting body to 100% and then setting #content-box to 100%. Here is a random example I came across
<!-- IE in quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title>Fixed footer</title>
<style type="text/css">
body{
margin:0;
padding:0 0 <length> 0;
}
div#footer{
position:absolute;
bottom:0;
left:0;
width:100%;
height:<length>;
}
#media screen{
body>div#footer{
position: fixed;
}
}
* html body{
overflow:hidden;
}
* html div#content{
height:100%;
overflow:auto;
}
</style>
<div id="footer"> footer </div>
<div id="content"> content </div>