I have a simple CSS fixed width layout with a container and some backgrounds, and a three column design.
<body>
<form id="form1" runat="server">
<div id="BGContainer">
<div id="PageContainer">
</div>
<div id="Content">
<div id="MainContent">
<asp:ContentPlaceHolder ID="MainAreaContentPlaceholder" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div id="Bottom">
<div id="Copyright">
Copyright
</div>
</div>
</div>
</form>
</body>
In a different file, I have the content for the ContentPlaceHolder
<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="MainAreaContentPlaceholder">
<div id="Heading">
Overskrift
</div>
<div id="LeftColumn">
/*Content Here*/
</div>
<div id="CenterColumn">
center
</div>
<div id="RightColumn">
right
</div>
</asp:Content>
The problem is that #MainContent is not resizing in height. It always stays the same height
CSS
html {
height:100%;
}
body {
margin:0;
width:100%;
height:100%;
font-family: Verdana, Sans-Serif;
background-image:url(../Gfx/Design/bg.png);
background-repeat:repeat;
}
#BGContainer {
margin:0px;
background-image:url(../Gfx/Design/Background-top-gradient.png);
background-repeat:repeat-x;
height:210px;
width:100%;
}
#PageContainer {
background-image:url(../Gfx/Design/top-gradient.png);
background-repeat:no-repeat;
height:100%;
width:1016px;
margin-left:auto;
margin-right:auto;
}
#Bottom {
background-image:url(../Gfx/Design/Bottom.png);
background-repeat:no-repeat;
height:32px;
width:964px;
margin-left:auto;
margin-right:auto;
}
#Content {
background-color:#FFFFFF;
background-image:url(../Gfx/Design/content-background.png);
background-repeat:no-repeat;
width:1000px;
height:100%;
margin-left:auto;
margin-right:auto;
}
#MainContent {
width:980px;
height:100%;
margin-left:auto;
margin-right:auto;
background-color:#FFFFFF;
}
#Copyright {
color:#000000;
font-size:xx-small;
text-transform:uppercase;
margin-left:50px;
padding-top:5px;
}
#LeftColumn {
width:311px;
margin-left:10px;
border: 1px solid gray;
min-height:400px;
float:left;
}
#CenterColumn {
width:311px;
margin-left:10px;
border: 1px solid gray;
min-height:400px;
float:left;
}
#RightColumn {
width:311px;
margin-left:10px;
margin-right:10px;
border: 1px solid gray;
min-height:400px;
float:right;
}
To clear the floats without any additional markup use overflow:hidden
#MainContent {overflow:hidden;zoom:1;}
The zoom:1 will invoke hasLayout in ie6 so the float will clear in ie6.
The three columns (#LeftColumn, #CenterColumn, #RightColumn) are all floats, so they will not increase the height of #MainContent. Try putting a div (which can be empty) just after those three with clear: both. That will force it to sit below the three columns, and #MainContent will be at least tall enough to include this new div.
If your problem is instead that #MainContent is too tall, note that it has height: 100%, which you could remove (and then apply the above fix). Hope that helps.
You need to clear the floated content.
Insert as follows:
<div id="MainContent">
<asp:ContentPlaceHolder ID="MainAreaContentPlaceholder" runat="server">
</asp:ContentPlaceHolder>
<div class="clear"></div>
</div>
... and the CSS:
.clear{clear:both}
use the <p> tag and your text will resize depending on content needs
<div style="width:400px; border-bottom:1px solid teal; padding:20px;">
<p>your text or database field here</p>
</div>
I use the tag when i want a div height to change depending on the amount of text inside.
This example will give you a nice results list when querying from database that places a border in-between results.
Probably because you have a height set on the #BGContainer - if you remove this you might find that the box expands with the text
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'm trying to get some floated elements to appear outside of a container on a drupal page that is using a theme based on Omega. my page is currently structured as such:
<h2>Some header text</h2>
<div class="grid-12 region region-content center" id="region-content">
<div class="container-12">
<div class="pricing-main-background">
<div class="grid-4 plan-box-orange">
</div>
<div class="grid-4 plan-box-green">
</div>
<div class="grid-4 plan-box-orange">
</div>
<div class="pricing-subtext">
some more text down here
</div>
</div>
</div>
</div>
Here's a sketch of what I'd like to accomplish (notice the smaller boxes outside of the container):
Visual Aid
Can anyone help provide a way to make this work (preferrably that doesn't require a mess of CSS when the boxes stack (at 480px)?
Something like this?
h2
{
width:60%;
border:1px solid black;
border-bottom:0;
margin:0 auto;
text-align:center;
}
.grid-12
{
width:60%;
border:1px solid black;
margin:0 auto;
text-align:center;
}
.pricing-main-background {position:relative;}
.plan-box-orange {background:orange;}
.plan-box-green {background:green;}
.grid-4
{
display:inline-block;
width:30%;
height:50px;
margin-top:25px;
}
.grid-4:nth-of-type(1)
{
position:absolute;
left:-10%;
}
.grid-4:nth-of-type(3)
{
position:absolute;
right:-10%;
}
I have a simple image of a ball which I am using as a background. I would like to overlay text. The text will be a number, i.e. a lottery number.
I have tried various methods but cannot find a solution, e.g.
CSS
#container {
height:400px;
width:400px;
position:relative;
}
#image {
position:relative;
left:0;
top:0;
}
#text {
position:absolute;
color:black;
font-size:18px;
font-weight:bold;
text-align:center;
top:0px;
}
HTML
<div id="container">
<img id="image" src="http://www.powerball-lottery-blog.com/img/balls/ball_white_40.gif"/>
<p id="text">37</p>
</div>
I just cannot get the number to align vertically and horizontally in the ball.
I would use a background image instead. Much more reliable:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#container {
height:400px;
width:400px;
}
#text {
margin: 0;
color:black;
font-size:18px;
font-weight:bold;
width: 40px;
line-height: 40px;
text-align: center;
background: url(http://www.powerball-lottery-blog.com/img/balls/ball_white_40.gif) no-repeat;
}
</style>
</head>
<body>
<div id="container">
<p id="text">37</p> </div>
</pre>
</body>
</html>
You could get rid of the image. Here's what I would do:
#container {
background:url('http://www.powerball-lottery-blog.com/img/balls/ball_white_40.gif') no-repeat;
height:400px; width:400px;
}
#text {
color:#000; font-size:18px; font-weight:bold; text-align:center;
}
Now, you have to figure out the text height. The formula is (#container.height/2)-(#text.height/2). You should use JavaScript, like:
//center.js
function E(e){
return document.getElementById(e);
}
function center(innerElement){
var e = innerElement, p = e.parentNode, ih, oh;
if(window.getComputedStyle){
ih = getComputedStyle(e).getPropertyValue('height');
oh = getComputedStyle(p).getPropertyValue('height');
}
else{
ih = e.currentStyle.height;
oh = p.currentStyle.height;
}
e.style.margin = oh/2-ih/2+'px auto';
}
Now your HTML can contain:
<!--DOCTYPE and head with style here-->
<body>
<div id='container'>
<div id='text'>Line 1<br />Line 2</div>
</div>
<script type='text/javascript' src='center.js'></script>
<script type='text/javascript'>
center(E('text'));
</script>
</body>
</html>
You could set #image as absolutely positioned and set fixed widths for the container and #image to match the image size like so:
#container {
height:40px;
width:40px;
position:relative;
}
#image {
position:absolute;
left:0;
top:0;
z-index:-1;
width:40px;
height:40px;
}
#text {
color:black;
font-size:18px;
font-weight:bold;
text-align:center;
line-height:40px;
}
But personally, I'd set your image to the background of an element - that way you can eliminate a bit of HTML as well.
New HTML
<div id="ball">37</div>
New CSS
#ball{
width:40px;
height:40px;
font-size:18px;
font-weight:bold;
text-align:center;
line-height:40px;
background: transparent url("http://www.powerball-lottery-blog.com/img/balls/ball_white_40.gif") center center no-repeat;
}
http://jsfiddle.net/daCrosby/2WAAj/
<!DOCTYPE html>
<html>
<body>
<style>
#container
{
height:400px;
width:400px;
position:relative;
}
#ball
{
height:40px;
width:40px;
float:left;
position:relative;
background-image: url("http://www.powerball-lottery-blog.com/img/balls/ball_white_40.gif");
}
#text
{
position:relative;
color:black;
font-size:18px;
font-weight:bold;
text-align:center;
display:table-cell;
vertical-align:middle;
padding:3px;
}
</style>
<div id="container">
<table>
<tr>
<td>
<div id="ball">
<div id="text">
<p id="text">37</p>
</div>
</div>
<div id="ball">
<div id="text">
<p id="text"> 3</p>
</div>
</div>
<div id="ball">
<div id="text">
<p id="text">15</p>
</div>
</div>
<div id="ball">
<div id="text">
<p id="text">17</p>
</div>
</div>
<div id="ball">
<div id="text">
<p id="text">27</p>
</div>
</div>
</td>
<td>
<img src="http://www.lotterynumbers.name/media/images/misc/its-a-rollover.png" />
</td>
</tr>
</table>
</div>
</body>
</html>
I added a couple more balls to show you what it looks like. The container div at 400px by 400px will accommodate 10 balls across by 10 down. The float:left assures that it will wrap around if you simply copy/paste the ball divs.
Also, for single digits, you will want to add a non-breaking space (which I did) or a "0" (i.e. "04" instead of "4") to make sure they center correctly like the two-digit numbers.
I already have seen a couple of questions going in this direction, but nothing helped. Everyone says just set the parent div position to relative and the child ones to absolute. But my problem is that every div is at the 0/0 point of my parent div. It seems the inner elements doesn't know from each other.
Here is what my page should look like:
http://imageshack.us/photo/my-images/854/unbenanntgoc.png/
In my html I just define my divs:
<div id="content">
<div id="header" />
<div id="naviContent" />
<div id="imageContent" />
<div id="tagContent" />
<div id="textContent" />
</div>
So navi image and tag content divs should float.
And this is how my css looks like:
#charset "utf-8";
body {
background-color:#33FF00;
}
#header {
height:100px;
background-color:#FFFFFF;
position:relative;
}
#naviContent {
width:25%;
background-color:#F0F;
float:left;
}
#imageContent {
background-color:#000;
position:absolute;
float:left;
width:800px;
height:600px;
}
#tagContent {
background-color:#900;
position:absolute;
float:left;
width: 25%;
}
#textContent {
background-color:#0000FF;
clear:both;
}
#content {
height:1600px;
width:1200px;
background-color:#999999;
margin-left: auto;
margin-right: auto;
padding:10px;
position:relative;
}
So maybe anyone can tell me why all my elements (black, yellow, red, grey and green) are positioned to the 0/0 point of the pink one?
Thanks in advance
You need to close the DIV properly -
<div id="content">
<div id="header">Header </div>
<div id="naviContent">Nav</div>
<div id="imageContent">Image</div>
<div id="tagContent"> Tags</div>
<div id="textContent">Text </div>
</div>
EDIT: Working Fiddle You need to adjust floated width and you are done!
Position absolute is not the standard way of laying out a page.
What you should do is just remove the position attribute, float everything left and set widths (please note you will need content in the div for it to render correctly).
You might want to look into CSS grid systems such as 960.gs as they handle this part of development for you in a standardised way using pre-defined classes.
you should code like this : - http://tinkerbin.com/J9CCZXRL
CSS
#content {
background:pink;
width:500px;
padding:10px;
-moz-box-sizing:border-box;
overflow:hidden;
}
#header {
background:red;
height:100px;
}
#left {
background:green;
width:100px;
height:400px;
float:left;
}
#middle {
background:blue;
width:260px;
float:left;
height:400px;
margin-left:10px;
}
#right {
background:yellow;
width:100px;
float:right;
height:400px;
}
#footer {
background:grey;
height:100px;
clear:both;
}
HTML
<div id="content">
<div id="header"></div>
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
<div id="footer"></div>
</div>
I have a basic layout that is one Div container wrapper and three columns Divs inside. I want the left and right column to be of fixed with, with the middle one being dynamic to fit it's open space.
Here's a picture to demonstrate what it looks like now:
The red border is the container, and the blue border div is the one I want to expand to stretch as wide as it can so the yellow div is always almost touching the right border of the parent.
Thanks!
#body
{
border: 1px solid red;
min-height:800px;
width:auto;
margin-left:50px;
margin-right:50px;
}
#leftnavigation
{
border: 1px solid green;
min-height:500px;
float:left;
width:190px;
}
#contentarea
{
border:1px solid blue;
min-height:500px;
float:left;
width:auto;
margin-left:5px;
margin-right:5px;
}
#advertisingarea
{
border:1px solid orange;
width:150px;
float:left;
min-height:500px;
}
.advert
{
}
<div id="body">
<div id="leftnavigation"></div>
<div id="contentarea">sdfg<h1>asdasd</h1></div>
<div id="advertisingarea">
<div class="advert">
<img src="../../Content/images/advertImage.png" alt="Advert" />
</div>
<div class="advert">
<img src="../../Content/images/advertImage.png" alt="Advert" />
</div>
<div class="advert">
<img src="../../Content/images/advertImage.png" alt="Advert" />
</div>
</div>
</div>
Since display:table-cell is now universally supported in all modern browsers you might as well use that: http://jsfiddle.net/Lbpeh/1/
HTML
<div id="root">
<div id="left">
Left
</div>
<div id="middle">
Middle
</div>
<div id="right">
Right
</div>
</div>
CSS
#root {
display:table;
border-spacing:0;
width:100%;
height:500px;
}
#root > div {
display:table-cell;
}
#left {
background:red;
width:25%;
}
#middle {
background:green;
}
#right {
background:blue;
width:100px;
}
Keep in mind that table-like layout has some issues of its own, but what you're essentially trying to achieve is the behaviour of tables with semantically more correct markup. That's what display:table-cell is for.
There are quite a few:
http://www.codeproject.com/KB/HTML/relatively_simple.aspx
http://www.tjkdesign.com/articles/3cols.asp
http://www.alistapart.com/articles/holygrail
3 columns layout via DIVs (middle-flexible, all flexible height, STRICT mode)