here's my code:
<div id="banner" style="position:absolute; top:0px; width:100%; background:url('../../images/banner_repeat.jpg'); background-repeat:repeat-x; <!-- border:solid pink 1px; -->">
<ul id="banner_ul">
<li id="wrm"><i>The homepage of White Root Media!</i></li>
<li id="google"><i>+1 us on Google!</i></li>
<li id="facebook"><i>Like us on Facebook!</i></li>
<li id="twitter"><i>Tweet about us on Twitter!</i></li>
</ul>
</div>
<div id="container" style="<!-- border:solid yellow 1px -->; display: table;">
<div id="content" style="padding-top:90px; display:table-cell; min-width:945px; <!-- width:100% - 270px; -->">
This content will determine the height
</div>
<div id="right_column" style="display: table-cell; <!-- border:solid orange 1px; --> height:100%; width:270px; background-image:url('../../images/treetrunk7.png');background-repeat:repeat-y;">tree</div>
</div>
<div id="footer" style="position:relative; top:-1px; background-image:url('../../images/grass.png'); background-repeat:repeat-x; width:100%; height:100px;">grass</div>
here's the live page:
http://whiterootmedia.com/test/test4/
I would like the content div that is display:table-cell to go the full width of the page minus 270px. The tree should be all the way to the right.
Any help is greatly appreciated!
Thanks,
Dusty
You can use absolute positioning in the child div's
#foo {
display: table;
height: 400px;
position: relative;
width: 500px;
}
#foo > div {
display: table-cell;
height: 100%;
position: absolute;
}
#left {
background: blue;
left: 0;
right: 200px;
}
#right {
background: green;
right: 0;
width: 200px;
}
click here for demo
there are other methods of achieving the same effect such as changing the margins, I personally prefer the method above
Related
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 5 years ago.
I want to make my div2 to centre align and div3 to be at right.
I tried doing that with text align: center for main div and making float right to div3 but it is making it center align by considering main div's remaining part. I have given display: inline-flex to main div
<div style="height: 40px;width:120px;background-color: yellow;align-items: center;">
<div style="height: 20px;width:20px;background-color: red;">
Hello
</div>
<div style="height: 20px;float: right;width:20px;background-color: red;">
</div>
</div>
Please try with this code:
<div style="height: 40px;width:120px;background-color: yellow;align-items: center; position:relative;">
<div style="height: 20px;width:40px;background-color: red; overflow:auto; margin:0 auto">
Hello
</div>
<div style="height: 20px;position:absolute; right:0px; top:0px; width:20px;background-color: red;">
</div>
</div>
.main {
display: block;
position: relative;
width:100%;
text-align: center;
border: 1px solid red;
}
.main .div1 {
display: inline-block;
border: 1px solid;
}
.main .div2 {
float: right;
border: 1px solid;
display: inline-block;
}
<div class="main">
<div class="div1">
div1
</div>
<div class="div2">
div2
</div>
</div>
Divs are block level elements, so you can use a margin of auto on the left and right to place it in the middle.
.center {
margin: 0 auto;
}
.right {
float: right;
}
In the HTML you will need to adjust the ordering of the divs. Put div 3 before div 2 so that when you float it, they appear on the same line:
<div class="outer">
<div class="right"></div>
<div class="center"></div>
</div>
https://jsfiddle.net/dcqpw12u/1/
You can use position:relative for the main, and position:absolute to the other div, and it also centers it vertically
.main {
text-align: center;
background-color: red;
height: 50px;
position: relative;
}
.div2 {
background-color: blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.div3 {
background-color: green;
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%);
}
<div class="main">
<div class="div2">SOME DIV 2</div>
<div class="div3">SOME DIV 3</div>
</div>
Add style="margin: auto;" to your div2 element. And
style="margin-left: auto;" to your div3 element.
<div style="height: 40px;width:120px;background-color: yellow;align-items: center;">
<div style="margin:auto; height: 20px;width:20px;background-color: red;">
Hello
</div>
<div style="margin-left:auto; height: 20px;float: right;width:20px;background-color: red;">
</div>
</div>
.contentmain{
background: white none repeat scroll 0 0;
color: black;
height: auto;
width: 35%;
float: left;
background:red;
}
.contentCenter{
background: white none repeat scroll 0 0;
color: black;
height: auto;
width: 30%;
float: left;
background:yellow;
}
.contentRight{
background: white none repeat scroll 0 0;
color: black;
height: auto;
width: 35%;
float: right;
background:red;
}
<div class="contentmain">
Main<br/>
Content<br/>
</div>
<div class="contentCenter">
Center<br/>
Content<br/>
</div>
<div class="contentRight">
Right<br/>
Content<br/>
</div>
This might be fulfill your requirement.
<!DOCTYPE html>
<head>
<style>
.div0 {
text-align: center;
border-style: solid;
border-width: 5px;
height: 50px;
border-color: red;
position: relative ;
}
.div1 {
border-style: solid;
border-width: 4px;
right: 0%;
height: 40px;
width:40px;
border-color: green;
position: absolute;
}
.div2 {
left: 50%;
right:50%;
width:40px;
position: absolute;
border-style: solid;
height: 40px;
border-width: 4px;
border-color: green;
}
</style>
</head>
<body>
<div class="div0">
<div class="div1"><p>div1</p></div>
<div class="div2"><p>div2</p></div>
</div>
</body>
</html>
basically you can achieve this by using the position property and the right and left properties of CSS which you can refer to more on
Position and right property left property could be found on the site.
what i've done in my answer is set the main div as position relative and the other sub divs(div2 and div3) as absoulute
To get one div to the right most corner you set the right property to 0%
and to center a div i used 50% on both right and left properties.
I'm trying to make the first div child below use up 100% of the available space minus 20px and then use the second div child to use 20px and be on the same line as the first child div.
<div style="width: 10%;">
<div style="float: left; margin-right: 20px;">Left side, should use up all space except margin!</div>
<div style="float: left; margin-left: -20px; width: 20px;">Should only use 20px no matter what.</div>
</div>
This should be able to be done with CSS level one (that means no position lame-outs) though I know I'm missing something. Also there will be anchors in both div elements that must use 100% of the available width so there is a trick here to get the float to behave a certain way...
Solution #1
Make use of overflow: hidden (or overflow: auto) to fill the remaining horizontal space.
(NB: For this to work you need to place the element on the right hand side first in your markup)
FIDDLE
<div>
<div class="div2">DIV 2</div>
<div class="div1">DIV 1</div>
</div>
CSS
.div1 {
background:yellow;
overflow: hidden;
}
.div2 {
background:brown;
float:right;
width: 50px;
}
Solution #2
You can do this with box-sizing: border-box
FIDDLE
<div>
<div class="div1">DIV 1</div>
<div class="div2">DIV 2</div>
</div>
CSS
.div1 {
background:yellow;
float:left;
padding-right: 50px;
margin-right: -50px;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
}
.div2 {
background:brown;
float:left;
width: 50px;
}
Solution #3
Use css tables:
FIDDLE
<div class="container">
<div class="div1">DIV 1</div>
<div class="div2">DIV 2</div>
</div>
.container
{
display:table;
}
.div1 {
background:yellow;
display: table-cell;
width: 100%;
}
.div2 {
background:brown;
width: 50px;
display: table-cell;
word-break: break-word;
min-width: 50px;
}
Solution #4 (CSS3 required)
use calc
FIDDLE
On the first child set width: calc(100% - 50px)
On the second div set width: 50px;
.div1 {
background:yellow;
width: calc(100% - 50px);
float: left;
}
.div2 {
background:brown;
width: 50px;
float: left;
}
Can you change the HTML structure a bit?
<div style="width: 10%;">
<div style="display: block; width: 100%;">
<div style="width: 20px; float: right;"></div>
</div>
</div>
Here's another approach using display:table.
<html>
<style>
body { padding:0; margin:0; display:table; width:100%; }
#content { display:table-row; }
#b1, #b2 { display:table-cell; }
#b1 { background-color:#eee; padding:2em; }
#b2 { width:20px; background-color:#bbb; }
</style>
</head>
<body>
<div id="content">
<div id="b1">
<h1>Main content here</h1>
<p>Side bar on right is 20 px wide.</p>
</div>
<div id="b2">
</div>
</div>
</body>
</html>
Why in-line alignment won't work on Opera? It's all straight up.
DEMO: http://jsfiddle.net/KKEKW/
With Firefox or Safari it looks fine just like this. This is how it looks what I want.
With Opera it will be all straight up just like this. I dont want it.
HTML
<div class ="social">
<div class ="row">
<div class="twitter">
twitter content
</div>
<div class="facebook">
facebook content
</div>
</div>
<div class ="row">
<div class="google">
google content
</div>
<div class="instagram">
instagram content
</div>
</div>
</div>
CSS
div.social {
margin-top: 10px;
display: inline-block;
height: 90px;
overflow: hidden;
text-align: left;
vertical-align: bottom;
}
div.row{
}
div.twitter {
float: left;
width: 200px;
height: 30px;
overflow: hidden;
display:inline-block;
}
div.facebook {
float: left;
width: 170px;
height: 30px;
overflow: hidden;
display:inline-block;
}
div.google {
float: left;
width: 200px;
height: 25px;
overflow:hidden;
display:inline-block;
}
div.instrgram {
float: left;
width: 170px;
height: 30px;
overflow: hidden;
display:inline-block;
}
The output that I want
twitter content ewfe(20px margin)facebook conten adhfhefjw
google content ewffewfewfewfew(20px margin)instagram content dwqwqqwfqwe
A styled, unordered list can do this for you.
Give your LI a fixed width, give your UL twice as much. Use float:left on your LI.
<div class ="social">
<ul>
<li>twitter content</li>
<li>facebook content</li>
<li>google content</li>
<li>instagram content</li>
</ul>
</div>
CSS:
social ul, social li {
margin:0;
padding:0;
list-style:none;
}
.social ul {
width:500px;
}
.social li {
width:250px;
float:left;
}
i have trying to achieve this
| Div | |Div nav wrapper|
| logo |
|container|| Div banar container |
| || |
i hv tried this
<div class="grid_12">
<!--logo_container start here-->
<div id="logo_container">
</div>
<div style="margin-top: 57px" class="grid_13">
<div id="banar_container">
</div>
</div>
<!--logo_container end here-->
<div id="nav_wrapper">
<ul id="nav">
<li class="current_page_item">Home</li>
<li>My Profile</li>
<li>LogOut
</li>
</ul>
</div>
<!--#nav_wrapper-->
</div>
and the css are
.grid_12 {
width:940px;
}
.grid_13 {
width:851px;
}
#logo_container{
float:left;
margin-top:20px;}
#logo{
background:url(../images/bp.jpg) no-repeat left;
width:100px;
float:left;
height:100px;
}
#banar_container
{
float: left;
}
#banar
{
background:url(../images/Banner1.png) no-repeat left;
width: 851px;
float:left;
height: 71px;
}
#nav_wrapper {
position:relative;
display:inline;
float:right;
margin-right:25px;
margin-top:6px;
height:50px;
}
its not coming that way.. so what should i do?
this is my complete code ... this is what i am trying but failing to do it ... so guys pls take a look at this and tell me my fault
guys i am still struggling with this
I hope you'll find this example useful. Notice that, as you said, the size is fixed but still fluid relative to it's parent by using percentage.
HTML
<div id="example">
<div class="box01"></div>
<div class="box02"></div>
<div class="box03"></div>
</div>
CSS
#example {
width: 400px;
height: 400px;
}
div.box01 {
float: left;
width: 20%;
height: 100%;
background-color: #eee;
}
div.box02 {
float: right;
min-width: 100px;
min-height: 100px;
background-color: #ccc;
}
div.box03 {
float: right;
width: 80%;
min-height: 100px;
background-color: #aaa;
}
Code Example
The trick is to realize you need more divs than just those three. That is to say, divs 2 and 3 need to have a parent that is a sibling of div 1. Try something like this: http://codepen.io/anon/pen/rLDqc
HTML:
<div id="left">This is your div on the left</div>
<div id="center">
<div id="main">Hello, this is the third div</div>
<div id="right">This is the div in the top right</div>
</div>
<div class="clear"></div>
CSS:
#left{
width:30%;
background:red;
height:100px;
}
#center{
width:70%;
background:blue;
height:100px;
}
#left, #center{
float:left;
}
#right{
position:relative;
display:inline;
float:right;
}
#main{
margin-top: 57px;
float: left;
}
.clear{
clear:both;
}
You may do something like this:
<div class="wrapper">
<div class="div1"></div><div class="div2"></div>
<div class="div3"></div>
</div>
and CSS:
div{border:solid 1px black;}
.div1 {
width:50px;
height:100px;
float:left;
}
.div2 {
width:50px;
height:18px;
float:right;
}
.div3 {
width:250px;
height:80px;
float:left;
}
.wrapper{
width:304px;
border:none;
}
Demo
Or maybe even something like this: http://jsfiddle.net/4YX9H/1/ - width and height of div2 may be almost any (it just must be not wider than its parent)
#div1 {
width: 100%;
}
#div2, #div3, #div4 {
width: 33.3%;
float: left;
}
<div id="div1">
<div id="div2"></div><div id="div3"></div><div id="div4></div>
</div>
Change width of inside divs according to your needs.
Most confusing job in web designing for me is to align divs like these but if you understand every aspect of float, display and some other properties important for layout designing then you can easily create such layouts.
Check this fiddle for an example
http://jsfiddle.net/DeepakKamat/xQKXz/1/
The HTML :
<div class="container">
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
</div>
The CSS :
.container {backgroundcolor:yellow;display:block;width:400px;height:150px;padding:10px;}
.container div {margin:2px;color:white;}
#div1 {background-color:blue;width:20%;height:100%;border:2px dashed white;float:left;}
#div2 {background-color:green;display:inline-block;width:20%;height:70px;float:right;border:2px dashed white;}
#div3 {background-color:red;display:inline-block;width:76%;height:48%;border:2px dashed white;}
I hope this helps you.
Not sure what is the values of your div width and height.
Check this DEMO
Updated DEMO
How to display the image as vertical align in div container?
The image "setting.png" placed in last column in the code i attached. please advice solution please.
.table{
width: 100%;
margin: 20px 0px 20px 0px;
background-color: #EEEEEE;
}
.tableRow{
width: 100%;
clear: both;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #cccccc;
}
.tableCol{
float: left;
height: 40px;
line-height: 40px;
}
<div class="table">
<div class="tableRow">
<div class="tableCol" style="width:10%; text-align:center;">1</div>
<div class="tableCol" style="width:40%">Michael</div>
<div class="tableCol" style="width:40%">webexp#gmail.com</div>
<div class="tableCol" style="width:10%;">
<a href="" ><img src="images/icons/setting.png" alt="Setting" align="absmiddle" /></a>
</div>
</div>
</div>
Just add (space before a link)
<div class="table">
<div class="tableRow">
<div class="tableCol" style="width:10%; text-align:center;">1</div>
<div class="tableCol" style="width:40%">Michael</div>
<div class="tableCol" style="width:40%">webexp#gmail.com</div>
<div class="tableCol" style="width:10%;">
<a href="" ><img src="images/icons/setting.png" alt="Setting" align="absmiddle" /></a>
</div>
</div>
</div>
better solution:
add this to css:
img {
margin-top:10px;
}
Here, this should work:
Add this to your div which contains the image that should be centered.
display:table-cell;
vertical-align:middle;
This should center the image vertically no matter the dimensions of your div or the image that it contains.
You can do this with position: absolute; if you know the dimensions of the settings.png image (20px x 20px for this example).
Add class tableColSettings to the <a> around the settings image. Then add CSS;
.tableColSettings{
position: absolute;
display: block;
top: 50%;
left: 50%;
margin: -10px 0 0 -10px; /* Half image dimensions */
width: 20px;
height: 20px;
line-height: 0;
}
.tableColSettings img{
width: 100%;
}
The settings image will always stay in the center of the element, no matter the height. Here's a working fiddle: http://jsfiddle.net/384pa/
Hope this helps!
Css is having a tag name
"vertical-align" may be you will get your solution