I have two columns separated by a fixed margin which have a variable width. I'd like to center these:
<div style="margin: 0 auto">
<div style="background: red; float:left; margin-right: 10px">
sdf
</div>
<div style="background: red; float:left">
sdfsd
</div>
</div>
Here is the jsfiddle: http://jsfiddle.net/hSGTq/
If I fix the width of wrapper div it will work, but I am not sure how to get it to work with a variable width. I'd prefer not to use Javascript if possible.
Any ideas?
You can use display:inline-block on the internal divs and text-align:center on the wrapping div
JSfiddle Demo
HTML
<div class="wrap" style="margin: 0 auto">
<div class="inner" style="background: red; margin-right: 10px">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="inner" style="background: red; ">
<p>Lorem sit amet, .</p>
</div>
</div>
CSS
.wrap {
text-align: center;
border:1px solid grey;
padding:1em;
}
.inner {
display: inline-block;
}
Try to user display:table
Markup:
<div class="outer" style="margin: 0 auto">
<div class="inner" style="background: red;">
sdf
</div>
<div class="inner" style="background: red;">
sdfsd
</div>
</div>
Css:
.outer{
display:table;
border-spacing:10px;
}
.inner{
display:table-cell;
}
Demo
<div style="margin: 0 auto;width:100px">
<div style="background: red;float:left;margin-right: 10px">
sdf
</div>
<div style="background: red;float:left">
sdfsd
</div>
</div>
just add width (eg. 100PX) and you will get your div center
Related
i want a code which displays as
Account No:
But in my code its displayed as
and my code is as below
<td colspan="3">Account No:<div class="boxed">
</div>
<div class="boxed">
</div>
<div class="boxed">
</div>
<div class="boxed">
</div>
<div class="boxed">
</div>
</td>
Enclose the Account No. text with a div and add
CSS "float:left"
To that div.
Working code:
<table>
<tr>
<td colspan="3" style="float: left;">
<div style="float: left">Account No:</div>
<div class="boxed"></div>
<div class="boxed"></div>
<div class="boxed"></div>
<div class="boxed"></div>
<div class="boxed"></div>
</td>
</tr>
</table>
<style>
.boxed {
border: 1px solid;
width: 50px;
height: 50px;
float: left;
}
</style>
You can use div to wrap them and float.
<td colspan="3">
<div style="float:left;padding:15px 5px 0 0;">Account No:</div>
<div style="float:right;">
<div class="boxed"></div>
<div class="boxed"></div>
<div class="boxed"></div>
<div class="boxed"></div>
<div class="boxed"></div>
</div>
</td>
Fiddle
You can try this html structure and see fiddle link as below:
<td colspan="3">
<div class="title">
Account No:
</div>
<div class="boxed">
1
</div>
<div class="boxed">
2
</div>
<div class="boxed">
3
</div>
<div class="boxed">
4
</div>
<div class="boxed">
5
</div>
CSS:
.title {
float: left;
width: 20%;
}
.boxed {
border: 1px solid;
float: left;
padding: 10px 0;
text-align: center;
width: 7%;
}
https://jsfiddle.net/wwta4e8h/
.box{
border: 1px solid;
width: 30px;
height: 30px;
float: left;
}
<div style="float: left;">
<div style="float: left;padding-top:10px;padding-right:10px">Account No:</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
You can replace float: left; with display: inline-block; And in case if you want the boxes to ne top aligned add vertical-align: top;
<style>
.boxed {
border: 1px solid black;
display: inline-block;
vertical-align: top;
width:30px;
height:30px;
}
</style>
Image of the problem:
How do I go from the one on the left, to the one on the right, using CSS?
You can use a table:
<table>
<tr>
<td>You own</td>
<td>20</td>
</tr>
<tr>
<td>Price</td>
<td>20</td>
</tr>
<tr>
<td>BPS</td>
<td>0.50</td>
</tr>
</table>
or floating divs:
<div style="display:inline-block;">
<div style="float:left; width:150px;">You own</div>
<div style="float:left;">20</div>
</div>
<div style="display:inline-block;">
<div style="float:left; width:150px;">Price</div>
<div style="float:left;">20</div>
</div>
<div style="display:inline-block;">
<div style="float:left; width:150px;">BPS</div>
<div style="float:left;">0.50</div>
</div>
<div>
<div id="left"> <!-- float left -->
<p>You Own></p>
<p>Price</p>
<p>BPS</p>
</div>
<div id="right">
<p>20</p>
<p>20</p>
<p>0.50</p>
</div>
</div>
Two divs
<div class="box">
Your own:<br />
Price:<br />
PBS
</div>
<div class="box">
20<br />
20<br />
50
</div>
CSS
.box {
float:left;
padding-right:40px;
}
While I am in agreement that this can be a table, you can easily do this with floats.
.container {
padding: 0.5em;
width: 200px;
background: #333;
color: #fff;
}
.button {
background: #efefef;
padding: 5px;
color: #000;
margin-bottom: 0.5em;
}
.item-header {
font-weight:bold;
float:left;
width: 45%;
clear:both;
}
<div class="container">
<div class="button">Buy Foreign Worker</div>
<div class="items">
<div class="item-header">You Own:</div>
<div class="item-value">20</div>
<div class="item-header">Price:</div>
<div class="item-value">20</div>
<div class="item-header">BPS:</div>
<div class="item-value">0.5</div>
</div>
</div>
All you are doing is making the header values float to the left, and the clear ensures that it starts on a new row.
I am trying to split the page into two sections. One left area and right will be the content page. I have the following html but looks like it is not working. Any ideas, what I am not doing right?
<div id="wuiMainArea">
<div id="wuiMainContent">
<div id="wuiLeftArea">
<div id="wuiLefthandNavRoot">
<h2 class="wui-hidden">Section Navigation</h2>
<h3 class="wui-navigation-title"><p>Applications</p><p> </p></h3>
<div id="tree" style="float: left; width: auto; background-color: #f2f4f5;"> </div>
</div>
</div>
<div id="wuiInpageNav">
<div class="wui-inpage-container" id="in_100">
<p>This is the div I will be using for charts </p>
</div>
</div>
</div>
</div>
Like this
<div id="wuiMainArea" style="border: 1px solid;">
<div id="wuiMainContent" style="border: 1px solid;">
<div id="wuiLeftArea" style="border: 1px solid;float: left;">
<div id="wuiLefthandNavRoot">
<h2 class="wui-hidden">Section Navigation</h2>
<h3 class="wui-navigation-title"><p>Applications</p><p> </p></h3>
<div id="tree" style="float: left; width: auto; background-color: #f2f4f5;"> </div>
</div>
</div>
<div id="wuiInpageNav" style="border: 1px solid; float: left;">
<div class="wui-inpage-container" id="in_100">
<p>This is the div I will be using for charts </p>
</div>
</div>
<div style="clear: both;"></div>
</div>
</div>
#wuiMainArea, #wuiMainContent{
margin: 0 auto;
width: 960px;
}
#wuiLeftArea, #wuiInpageNav{
/* use half of the main content div's width */
/* -2 because of 1px-border on both sides */
width: 478px;
display: inline-block;
float: left;
}
It'll be better to use CSS styling HTML.
Define the widths to fit your needs. Also I recommend using classes instead of ids when appling same styles to multiple elements.
This question already has answers here:
How to align 3 divs (left/center/right) inside another div?
(21 answers)
Closed 8 years ago.
How can I align 3 divs in one line left-center-right without having to define explicit sizes?
Left should be aligned most to the left edge, and right to the right edge.
The following does not work:
<div style="float: left;">
left
</div>
<div style="float: right;">
right
</div>
<div style="margin: 0 auto;">
center
</div>
Add a wrapper div and give text-align:center
CSS
.wrap{
text-align:center
}
HTML
<div class="wrap">
<div class="left">
left
</div>
<div class="right">
right
</div>
<div class="center">
center sdv dg sdb sdfbh sdfhfdhh h dfh
</div>
</div>
DEMO
Heres an example of how to do this by placing the floats in the correct order.
jsFiddle Example
<div class="square" style="float: left;">left</div>
<div class="square" style="float: right;">right</div>
<div class="square" style="margin:0 auto !important;">center</div>
.square {
width:50px;
height:50px;
background-color:#ff0000;
text-align:center;
border: 1px solid #000;
}
<div style="width:100%;margin:0 auto; padding: 0">
<div style=" float:left;width:32%;border: thin solid black">
left
</div>
<div style=" float:left;width:32%;border: thin solid black">
center
</div>
<div style=" float:left;width:32%;border: thin solid black">
right
</div>
</div>
<div style="clear:both">
</div>
Try this
CSS
div{width:33%;}
HTML
<div style="float: left;border:1px solid red;">
left
</div>
<div style="float: right;border:1px solid green;">
right
</div>
<div style="margin: 0 auto;border:1px solid blue;">
center
</div>
It's not possible actually do it, without knowing about the content and layout pattern. But for a begining point, you can try this:
HTML:
<div class="clearfix holder">
<div class="column left">
Some Contents Here...
</div>
<div class="column middle">
Some Contents Here...
</div>
<div class="column right">
Some Contents Here...
</div>
</div>
CSS:
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.holder{
text-align:center;
}
.column{
display:inline-block;
*display:inline;
*zoom:1;
width:auto;
}
.left{
background-color:#ff0;
float:left;
}
.middle{
background-color:#f0f;
margin:0 auto;
}
.right{
background-color:#0ff;
float:right;
}
DEMO
What is the correct way to structure (html) on a page based on the image I have attached. I am trying but I keep getting overflow issues with the name for the second section appearing directly under the text section instead of on top of the photo. I have built my structure like this:
<div style="width:100%; padding-bottom:30px;">
<strong>Name1</strong>
<div style="float:left; padding-right:30px; width:20%">
PHOTO
</div>
<div style="float:left; width:70%">
TEXT SECTION
</div>
</div>
<div style="width:100%; padding-bottom:30px;">
<strong>Name2</strong>
<div style="float:left; padding-right:30px; width:20%">
PHOTO
</div>
<div style="float:left; width:70%">
TEXT SECTION
</div>
</div>
Move you <strong> outside the <div>-s and apply overflow: hidden to <div>s
.panel { width:100%; padding-bottom:30px; overflow: hidden }
.photo { float:left; padding-right:30px; width:20%; height: 80px; border: 3px solid #000 }
.text { float:right; width:70%; height: 80px; border: 3px solid #000 }
<strong>Name1</strong>
<div class="panel">
<div class="photo">
PHOTO
</div>
<div class="text">
TEXT SECTION
</div>
</div>
<strong>Name1</strong>
<div class="panel">
<div class="photo">
PHOTO
</div>
<div class="text">
TEXT SECTION
</div>
</div>
<strong>Name1</strong>
<div class="panel">
<div class="photo">
PHOTO
</div>
<div class="text">
TEXT SECTION
</div>
</div>
HTML
<div class="pick_group">
<h2>Name 1</h2>
<img class="photo" />
<p class="text"></p>
</div>
<div class="pick_group">
<h2>Name 2</h2>
<img class="photo" />
<p class="text"></p>
</div>
The CSS
place this in between just before the
.pick_group {
width: 800px;
margin: 0 auto;
clear: both;
}
.pick_group h2{
style if you want
}
.photo {
width: 200px;
float: left;
margin: 10px 25px;
}
.text {
width: 500px;
float: left;
margin: 10px 25px;
}