I have met a problem that i don't know where is wrong. my code is here:
<html>
<head>
<style type="text/css">
#top{
width:100%;
height: 78%;
background-color: #ccc;
}
#left{
width: 45%;
height: 100%;
display: inline-block;
background-color: green;
}
#right{
width:50%;
height: 100%;
display: inline-block;
background-color: pink;}
</style>
</head>
<body>
<div id="top">
<div id="left">
<div id="inside">asd</div>
</div>
<div id="right"></div>
</div>
</body>
</html>
if I add nothing to the "inside" div, then the layout would be alright , just like this:
but if i add any tag or even a few words in the "inside" dev .the layout would get wrong.
I'm new to HTML,so I don't know the problem,who can tell me why this happens? I've been driven crazy!!!help~~~~:(
You can use float (see the other answers), but you don't have to if you don't want to.
#left, #right { vertical-align:top; }
will get you what you want.
Aside: You should add <!DOCTYPE html> to the top of your page. In which case, you'll also need to add
html, body { height: 100% }
to your CSS.
try this:
#right{
width:50%;
height: 100%;
display: inline-block;
background-color: pink;
float:right;}
demo
You can resolve the issue by adding a float attribute in css.
Find the updated html template below
<html>
<head>
<style type="text/css">
#top{
width:100%;
height: 78%;
background-color: #ccc;
}
#left{
width: 45%;
height: 100%;
float: left;
background-color: green;
}
#right{
width: 50%;
height: 100%;
float: left;
background-color: pink;}
</style>
</head>
<body>
<div id="top">
<div id="left">
<div id="inside">test new</div>
</div>
<div id="right">test</div>
</div>
</body>
</html>
I would recommand to you twitter bootstrap for the layout of your div.
Using their css sheet.
<div id=top class=row-fluid>
<div id=right class=span6><div>
<div id=left class=span6><div>
</div>
The placement of block is way easier than with inline-block. All you need to get what you show in example is to add the background color. And float can easily become hard to handle.
there is also way to gain it by giving float to an element
#left {
width: 45%;
height: 100%;
/* display: inline-block; */
background-color: green;
float: left;
}
You're having a problem with block and inline. When the text appears, the browser puts the inside div into block display which ruins the inline styling. I'm not sure if there's a neat way around that using inline-block - you'll have to use float, I reckon.
Here's the float solution applied to your markup:
<html>
<head>
<style type="text/css">
#top {
width:100%;
height: 78%;
background-color: #ccc;
}
#left {
background:green;
float:left;
height:100%;
width:45%;
}
#right {
background:pink;
height:100%;
margin-left:45%;
width:50%;
}
</style>
</head>
<body>
<div id="top">
<div id="left">
<div id="inside">asdf</div>
</div>
<div id="right"></div>
</div>
</body>
</html>
Further, be careful of CSS height. It's a headache waiting to happen.
Related
I am trying to create a two div's side by side that fill my screen 100%. The left div contains some menu and the right the content. Here's the code I have at the moment: http://jsfiddle.net/HpWZW/ . The current problem is the height is only as large as my smallest div's content. So in this case my iframe in the right column is larger than my menu items in the left column; however, the height is limited to the left divs contents not the right. Any ideas? Thanks!
Code
<div>
<div class="table">
<div class="innerLeft">
<span>Left Column</Span>
</div>
<div class="innerRight">
<span>Content with Iframe</span>
</div>
</table>
</div>
...
html, body {height: 100%}
.table {
display: table;
height: 100%;
}
.innerLeft {
display: table-cell;
min-width: 160px;
background-color: lightblue;
color: black;
}
.innerRight {
display: table-cell;
width: 100%;
vertical-align: top;
background-color: red;
color: white;
}
I have ran in the same problem so many times, until I found this: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
It is a valid CSS solution for making your colums share the height. Then both will be the height of the largest column.
If you want to make your colums fill the whole screen you could use something like
.innerLeft {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 50%;
}
.innerRight {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
right: 0;
}
Note that this is css3 and wont work for old browsers.
css3
<style>
html, body{height:100%;padding:0;margin:0;}
div.table, div.table *{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
div.table{width:100%;height:100%;}
div.table div{border:1px solid black;width:50%;height:100%;float:left;}
</style>
html:
<div class="table">
<div class="innerLeft">
<span>Left Column</Span>
</div>
<div class="innerRight">
<span>Content with Iframe</span>
</div>
</table>
Page:
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height:100%;
padding:0;
margin:0;
}
div.table, div.table * {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
div.table {
width:100%;
height:100%;
}
div.table div {
border:1px solid black;
width:50%;
height:100%;
float:left;
}
</style>
</head>
<body>
<div class="table">
<div class="innerLeft"> <span>Left Column</span>
</div>
<div class="innerRight"> <span>Content with Iframe</span>
</div>
</div>
</body>
</html>
The above code would create two columns whenever you would like to fill the whole screen or a section.
The following code could be used to only fill the whole screen (containers behaves odd when using position absolute, there is workarounds though):
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height:100%;
padding:0;
margin:0;
}
#left {
width:50%;
height:100%;
position:absolute;
top:0;
left:0;
background:red;
}
#right {
width:50%;
height:100%;
position:absolute;
top:0;
right:0;
background:blue;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
</body>
</html>
Shortest answear is to use proper table, min-height can also help you, but not all browsers respect it.
Does this work for what your wanting?:
http://jsfiddle.net/Sgfnm/
<div>
<div class="table">
<div class="innerLeft">
<span>Left Column</Span>
</div>
<div class="innerRight">
<span>Content with Iframe</span>
</div>
</div>
</div>
.table {
display: block;
}
.innerLeft {
display: block;
width: 160px;
background-color: lightblue;
color: black;
float:left;
}
.innerRight {
display: block;
width: 100%;
vertical-align: top;
background-color: red;
color: white;
}
First, check out a working example of the layout I have:
http://jsfiddle.net/EPC8c/2/
What I'm trying to do is adding a top margin to this. Since I have most of this built on 100% height, things get a little weird when trying this: http://jsfiddle.net/EPC8c/1/ (fixed link)
The fluid layout now leaves the footer being pushed down past 0 or 100% of the page. This is probably working as intended, but I'm trying to find a solution to not cause this.
Any help with this would be amazing.
HTML
<div id="container">
<header></header>
<div id="content"></div>
<footer></footer>
</div>
CSS
html, body {
background: #ff3333;
margin:0;
padding:0;
height:100%;
}
#container {
position:relative;
background: #FFF;
margin: 0 auto;
width: 200px;
min-height:100%;
}
header {
height: 60px;
background: #888;
}
#content {
background: #FFF;
min-height: 200px;
padding-bottom: 60px; /*FOOTER HEIGHT*/
}
footer {
position:absolute;
bottom: 0;
width: 200px;
height: 60px;
background: blue;
}
Here's a solution, courtesy of this question: CSS 100% height with padding/margin
JSFiddle:
http://jsfiddle.net/EPC8c/5/
HTML:
<div id="wrapper">
<div id="container">
<header></header>
<div id="content">
</div>
<footer></footer>
</div>
</div>
CSS:
#wrapper {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:20px;
}
It's admittedly not the best solution and it relies on percentage margins, but one route would be to wrap it all in an absolutely positioned div with a percentage upper padding and a negative (equal) percentage bottom padding. Like this:
http://jsfiddle.net/EPC8c/3/
<div id="wrapper">
<div id="container">
<header></header>
<div id="content">
</div>
<footer></footer>
</div>
</div>
CSS:
#wrapper {
position: absolute;
width: 100%;
height: 90%;
padding-top: 10%;
padding-bottom: -10%;
}
Im trying to do layout that has header, content and footer. Footer must be bottom of the page(done). But my problem is how can I get content 100% strech between header and footer. When my content is empty, then I can't see that, but when I'm writing some word to html in to content div, like "hello", then the content is only so long than the content in content. I guess you can understand what I mean.
Can somebody explain what is wrong in my css code.
Red is header, green is footer, cyan is content and blue is container. Problem is that Content does not cover the container area.
<!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" content="text/html; charset=utf-8" />
<title>Praktika1</title>
<link rel="stylesheet" href="style1.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
CSS:
#CHARSET "UTF-8";
*{padding:0; margin:0;}
html,body{
height:100%;
}
#container{
width: 1024px;
position:relative;
background-color:#cce;
margin: 0 auto;
min-height:100%;
}
#header{
width: 1024px;
height:100px;
background-color: #CCC;
}
#content{
height:100%;
width:1024px;
background-color:yellow;
}
#footer{
width: 1024px;
height: 100px;
position:absolute;
bottom:0;
background-color: #ced;
}
You're in luck. I spent a good amount of time yesterday figuring out a question similar to this.
http://andrew.x10.mx/rene/
html -
<div id="container">
<div id="header">
<div id="header-content">
Hai der. I'm a header.
</div>
</div>
<div id="content">
<h1>Content here</h1>
<div id="footer">
<div id="footer-content">
I'm a footer lol
</div>
</div>
</div>
</div>
css -
html,body {
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
#header {
background: #0f0;
top: 0;
left: 0;
position: absolute;
width: 100%;
}
#header-content {
padding: 10px;
}
#container {
background: #ff0;
height:auto !important;
height:100%;
position:relative;
width: 1024px;
text-align: left;
margin: 0 auto;
min-height:100%;
}
#content { padding: 20px 10px; }
#footer {
background: #f00;
bottom: 0;
left: 0;
position: absolute;
width: 100%;
text-align: center;
}
#footer-content { padding: 10px; }
Hard to tell without the HTML, but I would try to add a min-height of %100 to #content
One solution would be this:
#content{
background-color:yellow;
position:absolute;
top:100px;
bottom:100px;
width:100%;
}
You could use absolute positioning on all three parts of the page (header, content, footer):
Live demo: http://jsfiddle.net/bBEJ6/
Perhaps a margin-bottom: 0 px could work?
Your question is worded very poorly, but from what I can see you want your content to fill up 100% of your page, yet you have specified a specific width on your #content section by using the width:1024px property.
Try width:100% and see if this solves your problem.
I have an idea for a layout I would like to use, but I can't get it to work correctly. I am hoping someone on here might be able to help as I have spent hours searching.
The layout is like so.
One wrapper div houses 6 child divs. Those child divs must be centered at ALL times regardless of the size of the wrapper div.
<html>
<head>
<title>Testing</title>
<style>
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; }
#wrapper { max-width: 960px; min-width: 320px; background: #444; margin: 0 auto; }
.box { width: 280px; padding: 10px; margin:10px; height: 260px; border: 0px; float: left; background: #fff; }
</style>
</head>
<body>
<div id="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<br class="clear" />
</div>
</body>
</html>
The problem is when the browser is resized smaller and a box is knocked onto the line below the boxes will alight left, whereas I want them to be always centered. Is this possible using pure css or do I need to use some jquery?
Probably the easiest solution is if you remove the float: left style from the boxes and change the display property to inline-block. Then all you need to do is to text-align: center on the wrapper.
<html>
<head>
<title>Testing</title>
<style>
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; }
#wrapper { max-width: 960px; min-width: 320px; background: #444; margin: 0 auto; text-align:center }
.box { width: 280px; padding: 10px; margin:10px; height: 260px; border: 0px; background: #fff; display:inline-block }
</style>
</head>
<body>
<div id="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<br class="clear" />
</div>
</body>
You can test the code here:
http://jsbin.com/uqamu4/edit
You could use text-align: center in the wrapper and display: inline-block for the boxes to make them behave like normal text elements that are centered no matter what.
Caveat: Doesn't work in IE6 and IE 7. Works in Chrome and FF
JSFiddle here.
This wont work in ie 8 or less, dont know about 9, but since your using max-width and min-width which dont work there either I'll post it anyway.
<html>
<head>
<title>Testing</title>
<style>
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; }
#wrapper { max-width: 960px; min-width: 320px; background: #444; margin: 0 auto; text-align:center; }
.box { width: 280px; padding: 10px; margin:8px; height: 260px; border: 0px; background: #fff; display:inline-block;}
</style>
</head>
<body>
<div id="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<br class="clear" />
</div>
</body>
</html>
The solution that worked for me:
<style>
body {
/* To center the list */
text-align: center;
}
#wrapper {
/* To reset 'text-align' to the default */
text-align: left;
display: inline;
}
.box {
display: inline-block;
}
</style>
In the following, I'd like to alter the CSS such that the right-sibling is truly centered in the container div. (Edit: without using absolute positioning).
<html>
<head>
<style type='text/css'>
#container {
width: 500px;
}
#left-sibling {
float: left;
}
#right-sibling {
text-align: center;
}
</style>
</head>
<body>
<div id='container'>
<div id='left-sibling'>Spam</div>
<div id='right-sibling'>Eggs</div>
</div>
</body>
</html>
In its current implementation, the right sibling's centering is affected by the left sibling -- you can see this by adding display: none to the left-sibling's style.
(Note: I'd like to avoid modifying the HTML structure because, as I understand it, the whole point of CSS is to decouple the tag structure from the presentation logic, and this doesn't seem like a really crazy request for CSS to handle.)
TIA.
A trick I just used to get this to work is to have padding on the left of the container and we can encourage the left-sibling to sit inside this space by giving it an equal but negative margin.
To complete the picture we also put padding on the right of the container of an equal size to the width of the left-sibling.
<html>
<head>
<style type='text/css'>
#container {
width: 500px;
padding-left:50px;
padding-right:50px;
}
#left-sibling {
border: solid 1px #000;
float: left;
width:50px;
margin-left:-50px;
}
#right-sibling {
border: solid 1px #000;
text-align: center;
}
#container2 {
width: 500px;
}
</style>
</head>
<body>
<div id='container'>
<div id='left-sibling'>Spam</div>
<div id='right-sibling'>Eggs<br />Eggs<br />Eggs<br /></div>
</div>
<div id='container'>
<div id='left-sibling' style="display:none;">Spam</div>
<div id='right-sibling'>Eggs<br />Eggs<br />Eggs<br /></div>
</div>
<div id='container2'>
<div id='right-sibling'>Eggs<br />Eggs<br />Eggs<br /></div>
</div>
</body>
</html>
Try setting a width to the left-sibling and an equal padding-right: to the right-sibling
like so
<html>
<head>
<style type='text/css'>
#container {
width: 500px;
}
#left-sibling {
float: left;
width:50px;
}
#right-sibling {
text-align: center;
padding-right:50px;
}
</style>
</head>
<body>
<div id='container'>
<div id='left-sibling'>Spam</div>
<div id='right-sibling'>Eggs</div>
</div>
</body>
</html>
You can change the float: left; on #left-sibling to position: absolute;.
This will take it out of the normal flow, so it won't affect right-sibling any more.
Of course, this could have other side-effects with your design.
You should always set a width on floated elements, otherwise things get weird :)
If you put a
border: solid 1px #000;
rule on both divs you will see what's happening - the #right-sibling div is filling the entire width of the parent div (#container), so although the text is actually aligned to the centre, it looks like it isn't!
The text-align attribute controls the alignment of the contents in the container where the attribute is applied. By adding the following styles it is easy to see:
#left-sibling { float: left; width:100px; border:1px Solid Blue; }
#right-sibling { text-align: center; width:100px; border:1px Solid Red; }
I would suggest adding a doctype to the document to avoid quirksmode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
and the following styles:
#container { width: 500px; position:relative; border:1px Solid Black; }
#left-sibling { float:left; position:absolute; top:0px; left:0px; width:100px; border:1px Solid Blue; }
#right-sibling { width:100px; position:relative; margin-left:auto; margin-right:auto; border:1px Solid Red; }
You would of course want to adjust the size of the siblings to fit your needs. The borders does a nice job showing what's really happening.