How to use div+css make three columns in html.
left and right columns width:auto, and middle one need width:990px(should be in the center) and they are height:100%.
HTML
<div style=" float:left; width:auto; height: 100%;background-color:#006;">Area1</div>
<div style=" float:left; width:990px; height: 100%;">Area2</div>
<div style=" float:left; width:auto; height: 100%;background-color:#006633;">Area3</div>
For this type of functionality you can use display:table property for this. Like this:
html,body{height:100%;}
div{
display:table-cell;
height:100%;
vertical-align:top;
}
Check this http://jsfiddle.net/K5H4e/
But it's not work till IE7 & below.
this will be easier using a table with three column .
general you shoud use something like this: Example on js-fiddle.
<div style="float:left; background-color:#006;" >Area1</div>
<div style="float:right; background-color:#006633;">Area3</div>
<div style="border:1px solid red;overflow:auto;" >Area2</div>
Note: You won't get the height of the rows align that easily, since they are independent elements.
EDIT:
in order to have the height:100%work on your divs, you need the following:
html, body {
margin: 0;
padding: 0;
height: 100%; /* important! */
}
div {
min-height: 100%;
}
EDIT2: updated fiddle
<div class="Division"><p>First Division</p></div>
<div class="Division"><p>Second Division</p></div>
<div class="Division"><p>Third Division</p></div>
.Division{
float: left;
width: 100px;
height: 200px;
border: 2px solid #000000;
margin-left: 10px;
}
How about this: jsfiddle
<div style="width:auto; height: 100%;background-color:#006;
display: inline">Area</div>
<div style="width:990px; height: 100%; display: inline">Area2</div>
<div style="width:auto; height: 100%;background-color:#006633;
display:inline">Area3</div>
Related
I try to arrange elements in div, I want their bottom edges align bottom of div container (pink one). I tried to figure out something by myself, but I didn't came up with anything good.
<div style="background: pink; display:block; height: 180px; float:left; border: 1px solid black;">
<div style="background: lightgreen; display:block; float:left; text-align: left; margin: 0; padding:0; width: 36%;">
dasas sasad asdasda<br/>
dsda dsadasd dasdasd<br/>
dddddddwwww www<br/>
zzzzzzzzZaaaaaaaaa
</div>
<div style="background: skyblue; display:block; float:left; text-align: left; margin: 0; padding:0; width: 39%; ">
sssssss sssssddddd<br/>
xccccccc<br/>
aaaaaaaaa vvvvvv
</div>
<div style="background: yellow; display:block; float:left; text-align: left; margin: 0; padding:0; width: 25%;">
uuuuuuu uuuuuu<br/>
zzzzzzz ddddddd
</div>
</div>
here is js fiddle
http://jsfiddle.net/Z3KvU/1/
and my attempts with display: inline-block; and vertical-align: bottom;
http://jsfiddle.net/H4EAT/
but results was far from expected
Thanks in advance for all suggestions
MTH
Add this style to the container:
display:flex;
flex-flow: row nowrap;
align-items: flex-end;
Demo
See this awesome article about flexbox: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
You can do it like this using Jquery: http://jsfiddle.net/Z3KvU/3/
$('.positioned').each(function() {
$(this).css({
top: $(this).parent().innerHeight() - $(this).innerHeight() + 'px'
});
});
It's more compatible, although less cool.
What is the easiest way to align a div to center widthout using position. i have 3 div and i want to set center of page with using CSS
<!doctype html>
<html lang="en">
<head>
<title></title>
</head>
<style>
#content {
width: 200px;
height: 200px;
margin:0 auto;
border: 1px solid #000;
float:right;
}
</style>
<body>
<div id="content">
content 1
</div>
<div id="content">
content 2
</div>
<div id="content">
content 3
</div>
</body>
</html>
You are using same ids multiple time. ids must be unique.
Use class instead.
Wrap all content divs in an element:
HTML:
<div class="container">
<div class="content">content 1</div>
<div class="content">content 2</div>
<div class="content">content 3</div>
</div>
CSS:
.container {
width:606px; /* (200*3) = 600 + (6px for borders) */
margin:0 auto;
}
.content {
width: 200px;
height: 200px;
border: 1px solid #000;
float:left;
}
DEMO here.
First of all, don't use ID like class, you can repeat ID so many times but it's a bad practice.
And I'm not sure if I understood it right, but remove float:right from your css which will get your div's one below another. You can see output fiddle
Here is the css with few line of code
.container{width:100%;}
.container div{border:1px solid red;margin:0 auto;width:200px;}
Give it a width and do margin: 0 auto;
Ow, and use an unique id.
first of all you are using "id" selector for 3 elements/containers which is wrong.
replace the style with below snippet
<style>
#content {
width: 200px;
height: 200px;
margin:0 auto;
border: 1px solid #000;
}
</style>
i just have removed the floating (which forcing your containers to be on right)
Wrap divs with a parent div and add margin:0 auto
.wrapper{
width:200px;
margin:0 auto;
border:solid 2px red
}
.content{
background:grey;
}
DEMO
You want to modify your code as less as possible?
Then you might want to delete your floating:
#content {
width: 200px;
height: 200px;
margin:0 auto;
border: 1px solid #000;
/*float:right;*/
}
Because you are using a margin to center the element, a float is not neccesary. A float will only put the element out of the flow(so basically the <body> doesn't see these elements as his content, which results that the elements cannot center them selves from their parent. There is no parent of the same flow!)
jsFiddle
It is also a good call to not use the same IDs. IDs should always be unique
However same IDs are supported by CSS, but it is a good practice to use unique IDs from now on.
You can use the margin: 0 auto; on the element which has to be placed in the center. However in order to do this the element must have some sort of a wrapper(not "body") to be able to use the auto setting.
<html>
<head>
</head>
<body>
<div id="page_wrapper">
<div id="div_1" class="centered_div">foo</div>
<div id="div_2" class="centered_div">foo</div>
<div id="div_3" class="centered_div">foo</div>
</div>
</body>
</html>
CSS:
#page_wrapper{
width:100%;
}
.centered_div{
margin: 0 auto;
}
This centers all elements which have the class centered_div to the middle of their parent.
Other option is to used fixed canter position. For example if you're creating a popup notification message, this might be a way to go.
.notification_window{
position: fixed;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
But if it's just a regular page element like a div with some content use the first example.
If you need any further explanations please comment.
I'm having weird CSS issue.
This jsfiddle shows it well.
HTML:
<div class="container" style="text-align: left;">
<div class="leftBox">
<div class="innerWrapper" style="background: gray;">Left</div>
</div>
<div class="rightBox">
<div class="innerWrapper" style="background: green;">Right</div>
</div>
</div>
<div class="container" style="text-align:center; background:red; ">Weird</div>
CSS:
.container {
width: 640px;
margin: 0 auto;
}
.leftBox {
width: 340px;
float: left;
}
.rightBox {
width: 300px;
float: left;
}
.innerWrapper {
width: 300px;
}
I don't understand why the lower div consumes the margin between the upper ones.
I expected it to consume only the "row" below the upper two columns.
Tried several different positioning and "voodos" but nothing helped.
Any idea?
Thanks.
You need to clear the element you want on it's own line, see fiddle: http://jsfiddle.net/JT5HL/1/
or CSS:
.container {
clear: both;
width: 640px;
margin: 0 auto;
}
.leftBox {
width: 340px;
float: left;
}
.rightBox {
width: 300px;
float: left;
}
.innerWrapper {
width: 300px;
}
Either give "clear:both" property to your ".container" class which is the older method.
SEE Fiddle: *http://jsfiddle.net/KjtJu/1/*
Or use the new solution "overflow: hidden;" property to your ".container" class
See fiddle: http://jsfiddle.net/8M3L9/1/
Use <div class="clear"></div> in your html inside the container div
Use .clear{clear:both;} in your css.
HTML:
<div class="container" style="text-align: left;">
...
<div class="clear"></div>
</div>
CSS:
.clear{clear:both;}
DEMO
You can change your innerWrapper to 100%;
.innerWrapper {
width: 100%;
}
This seems to work.
http://jsfiddle.net/JT5HL/4/
<div class="container" style="text-align:center; background:red; clear:both; ">Weird</div>
Why not just close the gap in between the left and right by making width: 320px;?
See Fiddle :http://jsfiddle.net/JT5HL/7/
Or you could add a height to the container like this height: 20px; this will get rid of the red in the space.
See Fiddle : http://jsfiddle.net/JT5HL/8/
I have a code like
<div id="container" >
<div id="content"></div>
<table id="link" cellspacing=0px; cellpadding=0px;>
</table>
</div>
with css
#contentDiv {
width: 100%;
height:100%;
margin: 0;
}
#content {
width:90%;
height:60%;
margin-left:20px;
display: inline;
vertical-align: left;
z-index:40;
}
#link {
width:30%;
height:50%;
margin: 0;
margin-top:10px;
margin-right:10px;
float: right;
z-index:70;
}
i want it to display like
without absolute div floating over table
but its not displaying like that any help is appreciated?
Use a floating div but make the left-margin of the div a negative number so it 'floats' over the table
For example:
CSS:
#container {
width: 100px;
height: 100px;
float: left;
background-color: red;
}
#content {
width: 60px;
margin-right: -30px;
height: 60px;
float: right;
background-color: green;
}
HTML:
<div id="container">
<div id="content"></div>
</div>
works fine.
First: You have a container element, but no CSS statements tied to it. And you have a contentDiv CSS statement, but no corresponding HTML element.
Second: As davblayn mentioned, you can use a negative margin-left value.
#link {
...
margin-right:-40px;
...
}
See an example here (JSFiddle).
If you change the display property of each table element to block, it will force the table back into block mode and then everything works fine.
<div style="float:right;background:red;width:200px;">This is a test.</div>
<table style="display:block;background:green;">
<tr style="display:block;">
<td style="display:block;">
This is a very long string. This string should break to the next line instead of spanning across like usual.
</td>
This is my HTML
<div class="one">...</div>
<div class="two">...</div>
<div class="three">...</div>
<div class="four">...</div>
<div class="five">...</div>
How can I get this image by using only CSS? I guess with float, but how can I get the fifth div next to the first one?
Changing the HTML is NOT (!) an option.
My first comment would be that class names can't start with a number, so I really hope that you can edit the HTML for that. To answer your question ignoring this fact, if each element has a class, this is pretty simple. Just do this:
div {
float: left;
width: 200px;
height: 100px;
border: 1px solid #000;
display: block;
clear: left; }
div.5 {
float: none;
clear: none;
display: inline-block; }
Preview: http://jsfiddle.net/Wexcode/mvwSL/
You have a few options:
Float and negative margins:
.five{float:right; margin-top:-500px;}
Demo
Or margins only
.five{margin:-500px 0 0 200px;}
Demo
Or relative positioning:
.five{position:relative; top:-500px; left:200px;}
Demo
Or absolute positioning:
.five{position:absolute; top:0; right:0;}
(Make sure the container is set to position:relative;)
Demo
First, classes with numeric values are not valid. You're quite screwed if you can't change them... With proper classes, a solution might be:
CSS :
div {float:left;clear:left}
div.c5 {float:right}
jQuery
$("div.c5").insertBefore("div.c1")
See this fiddle
#Wex
div:last-child{
float: none;
clear: none;
display: inline-block;
}
Try below: It works as you required but horizontally, you want vertically. But am sure it might help you.
#outer {
width: 500px;
margin: 300px 0 0 10px;
}
.inner {
background-color: red;
width: 100px;
height: 100px;
float: left;
margin: 10px;
}
<html>
<body>
<div id="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
<div class="inner">4</div>
<div class="inner">5</div>
<div class="inner">6</div>
<div class="inner">7</div>
</div>
</body>
</html>