Although a lot of questions are about similar issues, they always want all items centered (which of course can be done using display:inline-block), however I need the last line of items to be neatly floated left and only center the container (which is located in a variable container (the body) itself).
The problem is that no matter what display and clear I set for the container, it never takes the width of the containing floated elements. I am seriously tempted to think that this should be incredibly simple, but I can't figure out how to get it working.
Here is a basic fiddle to play around with.
You have to use an inner div for your solution:
CSS:
#inner{
width:396px; /* (100+15*2+2) * 3 */
margin:auto;
}
HMTL:
<div id="container">
<div id="inner">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
<div class="clear"></div>
</div>
</div>
DEMO and DEMO without fixed body width.
UPD: just noticed that you don't want your body width to be fixed. Use width:80%; then instead. DEMO
The problem is you need 2 divs to center this correctly then a set width div to contain all the blocks. Then you can clear it and use the inner inner div (called 'content' in my code here) to control the beginning of the inner float.
Updated your fiddle:
http://jsfiddle.net/h9H8w/8/
// HTML
<div id="container">
<div id="inner">
<div id="content">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
</div>
</div>
</div>
// CSS
body{
width: 100%;
}
#container{
float: left;
position: relative;
left: 50%;
}
#inner{
float: left;
position: relative;
left: -50%;
border:1px solid black;
}
#content{width: 500px;}
.clear{
clear:both;
}
.block{
float: left;
width:100px;
height:50px;
border:1px solid black;
margin: 15px;
}
Related
I am trying to create a div which is as wide as the page and has two div's inside it, one which is aligned left and one aligned right. Its' turning out to be a lot more difficult than I expected. With the code below, both div's align left. I have made a jsFidle to demonstrate the problem. Thanks for reading.
<style>
#container{
border:1px solid;
}
#left{
text-align:left;
border:1px solid red;
display:table-cell;
}
#right{
text-align:right;
border:1px solid blue;
display:table-cell;
}
</style>
<body>
<div id = "container">
<div id = "left">far left</div>
<div id = "right">far right</div>
</div>
</body>
There's no need to use floating elements or absolute positioning in general for something like this.
It's an approach that should've stopped along with using tables for general layouts.
Sample Jsfiddle
CSS:
#container {
display: table;
width: 100%;
}
#container > div {
display: table-cell;
}
.right {
text-align: right;
}
HTML:
<div id="container">
<div>
<p>Left</p>
</div>
<div class="right">
<p>Right</p>
</div>
</div>
You need to use
float: left
and
float: right
on the divs.
A cooler way of aligning things is to use
display:flex
on the container, but you'll have to check the browser compatibility for that I'm afraid.
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 using http://www.cssstickyfooter.com/ for a fluid header/footer/content page.
I am trying to do a two column layout for my site. Left div navigation; the right div content.
The left column has content vertically aligned in the center. The content is both vertically-aligned in the center as well as horizontally aligned in the center.
I'm stuck at laying out the navigation.
I would think I should be able to make a div for the nav container {float:left; width:300px;display:table;} then make the nav_content div something like {height:300px; display:table-cell; vertical-align:middle;}.
I thought at first the issue was that the container needs to span 100% height of whatever was left over after the footer and then the content would be able to vertically align the height. (The only thing I can find is 'background-hacks' to achieve this and Jscript to calculate and dynamically update absolute height. It doesn't seem right to me that those are the only options.) But when I set the parent div to a set height, then try and vertically-align the content, it still does not work. I really do not understand as all the resources I have read states that the parent contains table display and table-cell can use the vertical-align middle. (does using float mess this up?)
Here is a crudely drawn layout I am trying to accomplish.
http://i.imgur.com/VefhxU7.png
Here is the idea with the code.
<div id="wrap">
<div id="header">
</div>
<div id="main">
<div id="container">
<div id="content">
</div>
</div>
<div id="side">
<div id="nav">
</div>
</div>
</div>
</div>
<div id="footer">
</div>
#side
{
background: none repeat scroll 0 0 #B5E3FF;
float: left;
position: relative;
width: 250px;
display:table;
}
#nav
{
display:inline-block;
vertical-align:middle;
height: 350px;
width:200px;
background-color: blue;
}
What am I doing wrong? Thanks for anyone who tries to help. :)
try this :
<style>
#footer {
background-color: #999;
}
#header {
background-color: #0C6;
}
#side
{
background: none repeat scroll 0 0 #B5E3FF;
float: right;
position: relative;
width: 70%;
display:table;
height: 350px;
}
#nav
{
display:inline-block;
vertical-align:middle;
height: 350px;
width:30%;
background-color: blue;
float: left;
}
</style>
<body>
<div id="mainContainer">
<div id="header">This is header</div>
<div id="nav">This is Nav</div>
<div id="side">This is side</div>
<div id="footer">This is footer</div>
</div>
</body>
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;
}