I'm having problems with my page's layout. I'm trying to do a header, 3-column, footer layout, all centered. Here is my code:
css:
#pgCenter
{
text-align:center;
margin: 20px;
}
#container
{
text-align:left;
width: 850px;
margin: 0 auto;
}
#container #header
{
width:100%;
text-align:center;
}
#container #col1
{
width: 250px;
float: left;
}
#container #col2outer
{
width: 600px;
float:right;
}
#col2outer #col2mid
{
width: 300px;
float: left;
}
#col2outer #col2side
{
width: 300px;
float: right;
}
#container #footer
{
text-align:center;
width: 100%;
}
html:
<body>
<div id="pgCenter">
<form id="form1" runat="server">
<div id="container">
<div id="header">
here is my header
</div>
<div id="col1">
This is where the login control goes. For testing purposes, I'll just throw some text in here.
</div>
<div id="col2outer">
<div id="col2mid">
<p>INSIDE DIV ID:col2mid - And here is some more placehold text so that I can see how this div is laying out!
I should also write some more text here because I still don't see anything going on :(</p>
</div>
<div id="col2side">
<p>INSIDE DIV ID:col2side - What else do you want me to put? I can't even think of anything right now except
eating some bomb delicious wingstop. I can't wait to get my paws on those saucy spicy cajun flavored mudda fuggas!</p>
</div>
</div>
<div id="footer">
<p>(footer) Copyright © 2011</p>
</div>
</div>
</form>
</div>
</body>
The problem I'm having is that the header and footer content want to show up above and below either the first or outer (col2outer) columns, based on the size of its content, instead of all the columns in a neatly stacked fashion. This col2outer div also appears 1 <br/> lower than the first column.
I've looked at several posts here and elsewhere and can't find the right help. I'm not very good at css and would love any advice and tips I can get on best practice, what I'm doing wrong, etc. Thank you very much.
PS - please excuse my placeholding text hehe.
To solve the first problem, you just need to add clear: both to #container #footer, to clear the floats above it.
The #container #col2outer problem is because the p elements inside have some margin set by default.
Also, you should drop the extraneous #container from the start of all of the selectors.
With all of those changes: http://jsfiddle.net/thirtydot/z4U3d/
You're doing way too much
#pgCenter
{
text-align:center;
margin: 20px;
}
#container
{
text-align:left;
width: 960px;
margin: 0 auto;
}
#header
{
width:100%;
text-align:center;
}
#footer
{
text-align:center;
width: 100%;
}
.oneThirdContainer {
width: 300px;
float: left;
}
.clear {
clear: both;
}
</style>
<div id="pgCenter">
<form id="form1" runat="server">
<div id="container">
<div id="header">
here is my header
</div>
<div class="oneThirdContainer">
<p>This is where the login control goes. For testing purposes, I'll just throw some text in here.</p>
</div>
<div class="oneThirdContainer">
<p>INSIDE DIV ID:col2mid - And here is some more placehold text so that I can see how this div is laying out!
I should also write some more text here because I still don't see anything going on :(</p>
</div>
<div class="oneThirdContainer">
<p>INSIDE DIV ID:col2side - What else do you want me to put? I can't even think of anything right now except
eating some bomb delicious wingstop. I can't wait to get my paws on those saucy spicy cajun flavored mudda fuggas!</p>
</div>
<div class="clear"></div>
<div id="footer">
<p>(footer) Copyright © 2011</p>
</div>
</div>
</form>
</div>
</body>
use overflow: hidden:
http://jsfiddle.net/zDbsQ/1/
Rather than try to point out what I see that's wrong with yours, I'll just show you how I would do it.
Essentially, you're describing 3 rows, the center row divided into 3 columns.
<!-- HTML -->
<div id="header">header</div>
<div id="middle">
<div id="col1">col 1</div>
<div id="col2">col 2</div>
<div id="col3">col 3</div>
</div>
<div id="footer">footer</div>
So, what you want to do is place the header and footer at a size that you're comfortable with, then allow the middle to take up space. As an example (and you'll want to adjust sizes):
/* CSS */
body {width:460px;}
body * {margin:0px; padding:0px;}
#header {width: 960px; max-width:960px; height:100px; border:1px solid black;}
#middle {width: 960px; max-width:960px; max-height:800px; border:1px solid black;}
#footer {width: 960px; max-width:960px; height:100px; border:1px solid black;}
#col1 {width:315px; height:100px; border:1px solid black; display:inline-block;}
#col2 {width:316px; height:100px; border:1px solid black; display:inline-block;}
#col3 {width:315px; height:100px; border:1px solid black; display:inline-block;}
That should put col1, col2, and col3 inline within middle. I included borders only to exemplify their placement...
There you have it – simple three column layout. Not the most elegant, but it'll do. For more elegant ones, view:
http://www.alistapart.com/articles/holygrail/
Related
I'm trying to work out the best way using CSS to keep Block 2 centred in the remaining space that exists to the right of Block 1. This space could increase or decrease with the size of the browser window / orientation of device. Block1's position does not move.
I was hoping to be able to use a combination of float, margin-left:auto and margin-right:auto as way of keep Block2 centred, however, sadly my CSS is still in it's infancy.
Any guidance / help would be greatly appreciated.
#block1 {
position:relative;
top:10px;
left:0px;
width:50px;
height:100px;
background-color:#009;
}
#block2 {
position:relative;
width:100px;
height:100px;
top:10px;
float:right;
margin-left:auto;
margin-right:auto;
background-color:#999;
}
<div id="block1"></div>
<div id="block2"></div>
http://jsfiddle.net/d4agp0h6/
Thanks in advance
An easier way to do this would be to use nested divs rather than trying to position two within the same block element.
Here's the updated jsFiddle
So, you create a wrapper (#block1) which is the size of the entire page so you can move stuff around inside. Position each subsequent piece of content within this area so you can set margins, position, etc.
HTML
<div id="block1">
<div id="block2">
<div id="content">
<p>This is some text</p>
</div>
</div>
</div>
Then, with your CSS, set the positions relative to one another so you can use margins and percentage spacing to keep things fluid.
CSS
#block1 {
position:relative;
top:10px;
left:0px;
width:200px;
height:400px;
background:#555;
}
#block2 {
position:relative;
width:75%;
height:100%;
float:right;
margin:0 auto;
background-color:#999;
}
#content {
margin:0 auto;
border:1px solid black;
position:relative;
top:45%;
}
#content p {
text-align:center;
}
It appears you want a fixed side bar and a fluid content area.
DEMO: http://jsfiddle.net/fem4uf6c/1/
CSS:
body, html {padding:0;margin:0;}
#side {
width: 50px;
background-color: red;
box-sizing: border-box;
float: left;
height: 500px;
position: relative;
z-index: 1;
}
.content {
position: relative;
box-sizing: border-box;
width: 100%;
padding: 20px 20px 20px 70px;
text-align: center;
}
#box2 {
width: 50%;
height: 300px;
background: purple;
margin: 0 auto;
}
HTML:
<div id="side"></div>
<div class="content">
<p>This is the content box. Text inside here centers. Block items need margin: 0 auto; inline and inline-blocks will auto center.</p>
<div id="box2"></div>
</div>
Here is my take on a solution. I used Brian Bennett's fiddle as a base, since I agreed with how he laid out the markup and was going to do something similar myself.
Link to JSFiddle
Where I differed is to add a container section:
<section id='container'>
<div id="block1"></div>
<div id="block2">
<div id="content">
<p>This is some text</p>
</div>
</div>
</section>
I also used percentages to determine widths instead of px values - with the exception of #container. Changing the width of the container should demonstrate that the relevant content is always centered.
Option 1
Here is one of the correct way of putting Block side by side... where one Block is on the Top Left... and the other Block is Top Center
Working Demo 1 : http://jsfiddle.net/wjtnddy5/
HTML
<div id="mainBlock">
<div id="block1">
<div class="box"></div>
</div>
<div id="block2">
<div class="box"></div>
</div>
</div>
CSS:
html, body {
height:100%;
margin:0;
padding:0;
}
#mainBlock {
height:98%;
width:98.9%;
border:5px solid #000;
}
#block1 {
width:10%;
height:100px;
display:inline-block;
border:1px solid #ff0000;
overflow:hidden;
}
#block2 {
width:89.2%;
height:100px;
margin-left:auto;
margin-right:auto;
border:1px solid #ff0000;
display:inline-block;
}
.box {
margin:0 auto;
background-color:#009;
width:100px;
height:100px;
}
Its using the "display:inline-block;" to put Blocks side by side which is better than using Float technique... let me know incase you need only Float!
Option 2
Here is the Other technique using "float: left" incase you need this only...
For this I have just replaced "display:inline-block" with "float: left" for both Blocks.... rest is same..
Working Demo 2 : http://jsfiddle.net/h78poh52/
Hope this will help!!!
http://jsfiddle.net/TomasRR/WuNL3/1/
Code works perfectly when there is no p's and h's in the divs. Once I put some text everything goes out of order.
<div class="cont">
<div class="left">
</div>
<div class="right">
</div>
</div> <!-- .cont -->
css
body {
width:100%;
margin:0;
padding:0;
}
.cont {
white-space:nowrap;
width:100%;
}
.left {
border:1px solid red;
width:50%;
height:200px;
display: inline-block;
}
.right {
border:1px solid black;
width:50%;
height:200px;
display: inline-block;
}
#media only screen and (max-width: 800px) {
.left, .right {
width: 400px;
}
}
when the text is added with p's and h's the html looks like that
<div class="cont">
<div class="left">
<h1>Programming and fuss</h1>
<h2><em>by Tomas R. </em></h2>
<p>MY TOP 3 PAGES:</p>
<a href="http://www.twitter.com/" target="_blank" title="it is twitter" />TWITTER</a>
WIKIPEDIA
VICE
</div>
<div class="right">
<p>"An ounce of practice is generally worth more than a ton of theory." <span>E. F. Schumacher.</span></p
</div>
It's better to look at fiddle... What I want ? I want blocks to stay in one line kind of, not to drop down.
Add vertical-align: top; to your .left style
On the webpage, I would like to create a virtual frame (centered about the page) and be able to align elements (e.g images, text, etc) within the frame using CSS properties.
Since a picture is worth a thousand words, this is what I mean:
I'd want to be able to align "Text1" to the left with respect to the virtual frame which is kept centered about the webpage. Similar idea with "CenteredText" and the blue box being aligned to the right relative to the frame.
I'd really appreciate suggestions on how I'd be able to do this.
This may help you:
HTML:
<div class="frame">
<div>Text1</div>
<div class="centered">Centered text</div>
<div class="box"></div>
<div class="clr"></div>
</div>
CSS:
.frame{width:80%; margin:0 auto; border:1px solid #444; height:500px}
.centered{text-align:center}
.box{background:blue; height:50px; width:50px; border:2px solid black; float:right}
.clr{clear:both}
jsfiddle: http://jsfiddle.net/ashishanexpert/fqaDQ/
margin: 0 auto;
in your css.
You need a div with a class or id you can attack to and then give it the above property.
This will centre the div in the page.
<body>
<div id="wrapper">
<div id="left">left</div>
<div id="centered">centre</div>
<div id="right">right</div>
</div> <!--close wrapper-->
css:
#wrapper{
margin: 0 auto;
width: 960px;
position: relative;
}
#left{
float: left;
}
#right{
float: right;
}
Good luck!
I am quite new to css and html, and I am having trouble floating divs within a another div,
I've done quite a bit of research online but have not been able to come up with a solution.
these are the sites I have read and where of no use:
barelyfitz /screencast/html-training/css/positioning/
stackoverflow /questions/580195/css-layout-2-column-fixed-fluid
mirificampress /show.php?id=106
How to get Floating DIVs inside fixed-width DIV to continue horizontally?
My code can be found on jsFiddle here
I hope this will help.
CSS:
#left, #right {
width: 100px; //change this to whatever required
float: left;
}
HTML :
<div id="wrapper">
<div id="left">
<p class="t0">lorum itsum left</p>
<div>
<div id="right">
<p class="t0">lorum itsum right</p>
<div>
<div>
Like this?
http://jsfiddle.net/Ev474/
<div id="wrapper">
<div id="inner">
<div id="left">
Left Content
</div>
<div id="right">
Right Content
</div>
</div>
</div>
div {
height: 50px;
}
#wrapper {
width: 200px;
overflow-x: auto;
overflow-y: hidden;
background-color: #ccc;
}
#inner {
width: 400px;
}
#left {
width: 150px;
float: left;
background-color: #f00;
}
#right {
width: 150px;
float: left;
background-color: #0f0;
}
Since you are a beginner. I will make it straight forward. Below is extraction of your code. I used internal style sheet. Your example you are using external style sheet.
Using float attribute you can set it to left and right. Here is used float:left to alight one div to left and float:right to alight other one to the right.
Each opened tag has to be closed tag.
<head>
</head>
<!--Internal style sheet-->
<style>
.left{
float:left;
}
.right{
float:right;
}
</style>
<body>
<div id="wrapper" >
<div class="left">
<p class="t0">lorum itsum left</p>
</div>
<div class="right">
<p class="t0">lorum itsum right</p>
</div>
</div>
</body>
</html>
Additional note: If you want to adjust the size of left and right div then use width in style sheet. Refer the updated style sheet below. I made left div width to 80% of the screen width and right width to 20%.(total should be 100%). Adjust accordingly.Background color used to set the background color of the div.
.left{
float:left;
background-color:powderblue;
width:80%;
}
.right{
float:right;
width:20%;
background-color:yellow;
}
Previously, I was using <table> to split up my page layout into 3 parts, the left sidebar, right sidebar & the main centre panel. Now, after having learnt the disadvantages of overusing/misusing <table>, I want to avoid using tables for this purpose & I am looking to style these 3 divs in such a way that they look like 3 columns of a <table> row.
Any inputs on how I can achieve the 3 divs in same row, would be highly appreciated.
Currently my all the three div s are shown in linearized fashion, one after another.
Maybe something easier, what about:
HTML:
<div id="main">
<div>content</div>
<div>content</div>
<div>content</div>
</div>
CSS:
#main{
margin: 0 auto 0 auto;
width: 960px; /*just an example*/
}
#main div{
float: left;
width: 320px; /* a third of the main width*/
}
I hope this will help you.
Typically sidebars have fixed width and the middel content area takes up the rest of the space. Considering that, here's the best approach:
<style>
#left {
width:200px;
float:left;
} #right {
width:200px;
float:right;
} #main {
margin:0px 200px;
}
</style>
<div id="container">
<div id="left">content</div>
<div id="right">content</div>
<div id="main">content</div>
</div>
Resize the window and all is well.
Working JSFIDDLE: http://jsfiddle.net/7ayqe/
Give them "float:left" properties and corresponding width to make it the size you want.
Example (I know these are inline styles, used for demonstration purposes only):
<div id="left-sidebar" style="width:30%;float:left"><!--Left Sidebar--></div>
<div id="content" style="width:50%;float:left"><!--Content--></div>
<div id="right-sidebar" style="width:20%;float:left"><!--Right Sidebar--></div>
Something like this should get you started:
<div>
<div class="column">column one</div>
<div class="column">column two</div>
<div class="column">column three</div>
<div class="last"></div>
</div>
.column { float: left; padding: 5px }
.last { clear: left}
Here is a live example
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
<div class="clear"></div>
CSS:
.col1 {
float:left;
width:250px;
}
.col2 {
float:left;
width:600px;
}
.col3 {
float:left;
width:20px;
}
.clear {
clear:both;
}