I'm always weak when it comes to positioning divs, but this situation is slightly difficult to find a solution to online. I'm trying to position boxes like so:
_ ___ _
|_|| ||_|
_ | |
|_||___|
Is there a way to avoid defining each one's pixel positions specifically and make them slot into the three columns I've got?
Define three containers for each column, and float them to the left:
<div style="float:left;width:Xpx"></div>
<div style="float:left;width:Ypx"></div>
<div style="float:left;width:Zpx"></div>
Now you can put all your containers in appropriate places in this columns.
take a look at this fiddle: http://jsfiddle.net/rREAh/ is this what you are looking for?
If you need a perfect layout, take a look at the yahoo layout manager: http://developer.yahoo.com/yui/layout/
See: http://jsfiddle.net/qXwKT/
CSS:
.box {
background: #ffffff;
padding: 5px;
border: 1px solid #b3b3b3;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#container {
margin: 0 auto;
width: 400px;
background: #ccc;
overflow: hidden
}
#left, #right {
float: left;
width: 75px;
}
#mid {
float: left;
width: 250px;
}
#mid .box {
margin: 0 10px;
border-color: red
}
#left .box {
margin: 0 0 10px 0;
border-color: blue
}
HTML:
<div id="container">
<div id="left">
<div class="box">left 1</div>
<div class="box">left 2</div>
</div>
<div id="mid"><div class="box">mid</div></div>
<div id="right"><div class="box">right</div></div>
</div>
Also take a look at this one: jsfiddle example which has a fluid layout.
And another one without the fixed div in the bottomleft corner.
Related
i have a web page with an image panel and a few div elements, with the same width, each containing an image.
I want to put them into 2 cascading columns with no spaces between them (except for the padding)
I have the following css code for image container:
.imageContainer
{
position:relative;
margin:4px 4px 4px 4px;
border:4px solid #333;
float: left;
display:inline-block;
min-height: 40px;
width: 48%;
}
This causes the columns to like like image 1 but i need the columns to look like number 2
Thank you!
EDIT:
.pg-main
{
float: left;
width: 100%;
padding: 0;
}
.entries
{
float: left;
width: 800px;
padding: 8px 20px 0 0;
}
.entries p
{
display: block;
}
.imageContainer
{
position:relative;
margin:4px 4px 4px 4px;
border:4px solid #333;
float: left;
display:inline-block;
min-height: 40px;
width: 48%;
}
Here is a possible solutions using columns -- does not work on IE9 or earlier.
FIDDLE: http://jsfiddle.net/YjHzd/
HTML
<div id="container">
<div class="block" style="height:30px"></div>
<div class="block" style="height:30px"></div>
<div class="block" style="height:70px"></div>
<div class="block" style="height:70px"></div>
<div class="block" style="height:50px"></div>
</div>
CSS
#container {
-moz-column-count:2;
-webkit-column-count:2;
column-count:2;
height: 145px;
width: 80px;
}
.block {
width: 40px;
background-color: red;
margin: 0 0 5px 0;
}
Unlike many of the other solutions on this page, mine works in all semi-modern browsers, including IE 6, 7, 8, 9; Firefox 3.6 through 29, and all versions of Chrome. See below for screenshots.
If they are of fixed widths, as illustrated, just 1) wrap your boxes inside another div and 2) do the following:
Here's the JSFiddle: http://jsfiddle.net/SqQqZ/
HTML:
<div>
<div id="leftBoxesBox">
<div class="redbox"></div>
<div class="redbox"></div>
<div class="redbox" style="height: 15em"></div>
</div>
<div id="rightBoxesBox">
<div class="redbox" style="height: 12em"></div>
<div class="redbox"></div>
</div>
</div>
CSS:
div.redbox {
background: red;
width: 10em;
height: 5em;
margin: 10px;
}
div#leftBoxesBox {
position: absolute;
left: 0;
width: 12em;
}
div#rightBoxesBox {
position: absolute;
left: 13em;
width: 12em;
}
Internet Explorer 6:
Firefox 3.6:
Please post your HTML, it would help.
Maybe this will help :
clear:left;
after your 2nd imagediv. so the 3rd div can float without problems.
Basically there are only two ways to do this. You can use Javascript to determine the position of the element. Or you can create two seperate columns that have the images contained within them. Left and Right Column
I'm trying to position clid divs in parent div but the height of parent div should be dynamic so it should either expand or shrink after child divs are positioned inside. How can I accomplish it? Childs should remain inside of parent all times.
Since I'm not designer at all I read "Learn CSS Positioning in Ten Steps" to learn a bit.
And this question "Make absolute positioned div expand parent div height".
Thanks
JSFIDDLE
CSS
#header
{
margin: 0 auto;
border: 1px solid #000000;
width: 500px;
background: #aa0000;
}
#body
{
margin: 0 auto;
border: 1px solid #000000;
width: 500px;
background: #ff0000;
}
#footer
{
margin: 0 auto;
border: 1px solid #000000;
width: 500px;
background: #dd0000;
}
#section_one
{
position: relative;
width: 100px;
height: 100px;
background: #EEEEEE;
top: 10px;
left: 10px;
}
#section_two
{
position: relative;
width: 100px;
height: 100px;
background: #EEEEEE;
top: 10px;
left: 150px;
}
HTML
<div id="header">HEARDER</div>
<div id="body">
<div id="section_one">SECTION ONE</div>
<div id="section_two">SECTION TWO</div>
</div>
<div id="footer">FOOTER</div>
You could use float:left and then postion the sections with margin
FIDDLE
Markup
<div id="header">HEARDER</div>
<div id="body">
<div class="section one">SECTION ONE</div>
<div class="section two">SECTION TWO</div>
<div class="section three">SECTION THREE</div>
<div class="section four">SECTION FOUR</div>
</div>
<div id="footer">FOOTER</div>
CSS
.section
{
width: 100px;
height: 100px;
background: #EEEEEE;
float:left;
}
.two
{
margin: 20px 0 0 10px;
}
.three
{
margin: 80px 0 0 50px;
}
.four
{
margin: 220px 0 0 -200px;
}
if it's just a matter of aligning those boxes, use margin&padding and inline-block instead of absolute positioning.
like this: http://jsfiddle.net/avrahamcool/JVh8e/1/
HTML:
<div id="cover">
<div id="section_one">SECTION ONE</div>
<div id="section_two">SECTION TWO</div>
</div>
CSS
#cover
{
margin: 0 auto;
padding: 5px;
width: 500px;
background-color: #000000;
}
#section_one, #section_two
{
display: inline-block;
width: 100px;
height: 100px;
margin: 5px;
background-color: #EEEEEE;
}
as you already read in the link you provided, an absolute element is removed from the flow, so unless you're willing to write a script that finds the necessary height of the cover, its impossible.
also: use background-color instead of background (if you apply only the color)
Update
this is the new fiddle (after your editing):
http://jsfiddle.net/avrahamcool/JVh8e/5/
Update 2:
check out this working example with script.
http://jsfiddle.net/avrahamcool/JVh8e/6/
Here is an image that illustrates my goal:
http://imgur.com/80v5bRk
What would be the best way to achieve a style that looks like this? By this, I am asking, how can I set up rules so that the spacing and locations of the buttons are perfectly aligned in the center (they are not aligned correctly right now). I was thinking of a div that wraps the whole thing together, a div that floats left holding the first angle and the title, and a second div that floats left holding the icons. The icons are from the font-awesome package and I do not understand how to align them correctly.
Something along the lines of this should do:
HTML:
<div class="bar">
<div class="first button"></div>
<dic class="second button"></div>
</div>
CSS:
.bar{
width: 960px;
height: 60px;
margin: 0 auto 0 auto;
padding: 5px;
}
.button {
width: 50px;
height: 100%;
float: right;
margin-right: 10px;
background-size: 50px 50px;
background-repeat: no-repeat;
background-position: center; /* This is what will centralize it vertically and horizontally */
}
.first { background-image: url('image.png') }
.second { background-image: url('image2.png') }
I hope this helped.
Well, its hard to answer it exactly unless you post what you currently have.
However, your on the right track.
What I would do:
Wrap the whole thing in a div (as you said)
float the text left (which you said as well)
float the icons right (not left)
As far as spacing, put a margin/padding left/right to the two buttons.
EDIT:
As per my discussion with Luiz Berti:
You are almost right.
Try this instead:
http://jsfiddle.net/GYPK5/1/
HTML
<div class="bar">
<div class="text">Lots of stuff here</div>
<div class="buttons">
<img src="http://icons.iconarchive.com/icons/led24.de/led/16/page-white-edit-icon.png" />
<img src="http://icons.iconarchive.com/icons/led24.de/led/16/bin-closed-icon.png" />
</div>
<div class="clear"> </div>
</div>
CSS
.bar {
width: 400px;
border: 1px solid black;
height: 20px;
font-size: 16px;
line-height: 20px;
}
.text {
margin-left: 20px;
float: left;
width: 200px;
}
.buttons {
float: right;
margin-right: 20px;
position: relative;
top: 2px;
}
.buttons img {
margin: 0 10px;
}
.clear {
clear: both;
width: 0;
height: 0;
}
I'm a tables guy, but I'll need to drag and drop some divs, so I tried doing it tabeless (the right way).
This is what I want to do:
The space between all elements should be 24px. My main problem is having the divs (1,2,3) occupying 100% of available space. The width: 100% its sending them beyond the main container.
This is my code so far:
html
<div id="mainContainer">
<div id="topContainer">Just the top one
</div>
<div id="table">
<div id="Line1Container">
<div id="container1" class="container">1
</div>
<div id="container2" class="container">2
</div>
<div id="container3" class="container">3
</div>
</div>
<div id="Line2Container">
<div id="container4" class="container">4
</div>
<div id="container5" class="container">5
</div>
<div id="container6" class="container">6
</div>
</div>
</div>
</div>
And my css
#mainContainer {
border: 1px solid lightgray;
position:fixed;
top: 80px;
bottom:20px;
left:80px;
right:80px;
overflow-y: scroll;
overflow-x: hidden;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
#topContainer {
border: 1px solid lightgray;
border-radius: 10px;
margin-left: 24px;
margin-right: 24px;
margin-top: 24px;
}
#table {
display: table;
margin: 24px;
width: 95%;
}
#Line1Container, #Line2Container {
display: table-row;
}
.container {
border: 1px solid lightgray;
display: table-cell;
width: 33%;
border-radius: 10px;
}
As you see I tried the table-cell approach, but before I have tried the float: left approach.
Thanks
Fiddle
You can't properly use px values with % values together with dynamic sizes.
You should use x% instead of 24px.
And you can use float: left on the "cells"
How about using a table for separating the divs? that way with the td padding there will always be 24px between them
check out this fiddle:
http://jsfiddle.net/5zfEq/
added:
#Line1Container {
padding:12px;
}
#inner-table {
width: 100%;
}
#inner-table td {
padding: 12px;
}
based on #Edifice fiddle .... thanks ;)
I'm trying to create a layout where I have three equal-wdith columns (33% width each). However, I want a 15px margin on either side of the middle column.
Please see this jsbin example I've created: http://jsbin.com/usiduy/edit
How can I get the blue column to sit on the right?
Try this css:
body { margin: 0; padding: 0}
#container {
position: absolute;
top: 30px; left: 50px;
bottom: 30px; right: 50px;
border: 1px solid #ccc
}
#container > div {
width: 33%;
height: 100%;
float: left;
}
#container div div {
height:100%;
}
#container div div.a {
background: red;
}
#container div div.b {
background: green; margin:0 15px;
}
#container div div.c {
background: blue;
}
using this HTML:
<div id="container">
<div><div class="a">First</div></div>
<div><div class="b">Second</div></div>
<div><div class="c">Third</div></div>
</div>
If you mean three equal width table columns in sum, you can create a table with three columns, then set padding-left: 15px and padding-right: 15px in the middle column (in td).
You can do like this:
CSS:
.item.first { background: red;width: 33%;float:left; margin-right:15px}
.item.middle { background: green; overflow:hidden;}
.item.last { background: blue;width: 33%;float:right;margin-left:15px}
HTML:
<div id="container">
<div class="item first"></div>
<div class="item last"></div>
<div class="item middle"></div>
</div>
Check live example
http://jsbin.com/usiduy/4/edit#html
Updated:
http://jsbin.com/usiduy/6/edit#html
Because you are mixing fixed pixel widths with percentages, you need to calculate the 33% of the page width minus the 30px of margins on the fly.
This is a JavaScript solution, so a JavaScript savvy contributor should be able to help you out :)