I have a div that has text and images inside, it's 190px x 190px and I would like to have everything vertically centered.
I've tried looking on SO and Google and can't seem to find just a simple answer to do so.
What's the simplest way of doing this?
Fiddle
HTML:
<div class="block">
<h2>TITLE</h2><br/>
<img src="...." width="190px"/>
<p>Hello world</p>
</div>
CSS:
.block {
position:relative;
width:190px;
height:190px;
background-color:FFF;
margin:10px;
float:left;
left:-10px;
text-align: center;
padding:10px;
border:solid 1px #CCC;
font-size:small;
}
.block p {
text-align: left;
}
Hi you can use this two properties:
.block {
display:table-cell;
vertical-align:middle;
}
and remove the float:left. Review this demo http://jsfiddle.net/kGt54/17/ and ask any question.
Edit
If you want to keep the float:left you need to make an external container who float and have the margin :
.blockC {
float:left;
margin:10px;
}
New Demo http://jsfiddle.net/kGt54/29/
.block {
position:relative;
background-color:FFF;
margin:10px;
float:left;
left:-10px;
text-align: center;
padding:10px;
border:solid 1px #CCC;
font-size:small;
}
.block p {
text-align: center;
}
just remove the width:190px; and height:190px; in the .block{} and in .blick p{} just change the text-align : left; to text-align : center; i hope thats what you want to achieve.. happy coding.
Related
Can someone tell me why the contents of page-view-count & num-of-days div spills into top-header in my implementation?
Markup:
<div id="top-stats">
<div id="page-view-count">count</div>
<div id="num-of-days">num of days</div>
</div>
<div id="top-header"This is a test</div>
CSS
#top-stats{
width: 100%;
}
#page-view-count, #num-of-days{
color: #666;
text-shadow:1px 1px #FFFFFF;
font-size:13px;
font-weight: bold;
padding-bottom: 5px;
}
#page-view-count{
float:left;
}
#num-of-days{
float:right;
}
#top-header{
width:100%;
display:block;
background-color:#DBDB70;
border-radius:3px;
}
If I were to remove the float property it stacks up nicely inside top-stats.
See fiddle
I'm probably missing some simple rule but I'm probably looking too closely and need another pair of eyes..
#top-header{
clear: both;
width: 100%;
display:block;
background-color:#DBDB70;
border-radius:3px;
}
Fiddle
I've been trying to create a site with the following structure:
But I can't seem to get the header correct (e1 left, e2 centered, e3 right). I want the three elements e1, e2 and e3 to be left, middle and right positioned. This is what I'm trying:
<div id="wrapper">
<div id="header">
<div id="header-e1">
1
</div>
<div id="header-e2">
2
</div>
<div id="header-e3">
3
</div>
</div>
<div id="nav">
links
</div>
<div id="content">
content
</div>
<div id="footer">
footer
</div>
</div>
With this css:
#wrapper
{
width: 95%;
margin: 20px auto;
border: 1px solid black;
}
#header
{
margin: 5px;
}
#header-e1
{
float: left;
border: 1px solid black;
}
#header-e2
{
float: left;
border: 1px solid black;
}
#header-e3
{
border: 1px solid black;
}
#nav
{
margin: 5px;
}
#content
{
margin: 5px;
}
#footer
{
margin: 5px;
}
Can someone give me tips to what I can do? The structure is going to be used on a mobile website.
UPDATE
The code I have above gives me this:
But I want the 2 centered and the 3 on the right side. I don't want to set the width to a percent because the content in the elements may vary, meaning it may be 20/60/20 - 10/80/10 - 33/33/33 or something else.
Utilize the Magic of Overflow: Hidden
If you can swap the html position of 2 & 3 like so:
<div id="header-e1">
1 is wider
</div>
<div id="header-e3">
3 is also
</div>
<div id="header-e2">
2 conforms
</div>
Then you can set this css which will cause 2 to "fill" the available space because of the overlow: hidden on it. So if 1 & 3 expand, 2 narrows (shrink window down to see what happens at really small size).
#header-e1 {float: left;}
#header-e2 {overflow: hidden;}
#header-e3 {float: right;}
Technically, you could keep your current html order and your float: left on both 1 & 2 and make 3 the flex div with overflow: hidden. You could do the same with 1 by reversing the order of the html completely and setting 2 & 3 to float: right with 1 having overflow: hidden. To me it would seem best to have the middle flex, but you know your application better than I.
If you are trying to make the site with a responsive width, you can try the following (33% is roughly one-third):
#header-e1 {
float: left;
width:33%;
border: 1px solid black;
}
#header-e2 {
float: left;
width:33%;
border: 1px solid black;
}
#header-e3 {
float: left;
width:33%;
border: 1px solid black;
}
You could also used fixed widths for the divs. If you want the further from each other you can play with their left/right margins etc. Hope that helps!
Here is an edit for no widths:
#wrapper {
position:relative; (add to wrapper)
}
#header-e1 {
position:absolute;
left:0;
border:1px solid black;
}
#header-e2 {
position:absolute;
left:50%;
border:1px solid black;
}
#header-e3 {
position:absolute;
right:0;
border: 1px solid black;
}
You need to give the divs in your header a width, and float header-e3 left.
Note: They all have the same CSS properties, so just give them the same class like .headerDivs and then you don't have repeating code
Edit: here is a working jsfiddle: http://jsfiddle.net/eNDPG/
I'm using a similar idea to what RevCocnept suggested with the width: 33%, except using display: inline-block instead of float: left. This is to avoid removing the div elements inside #header from the flow of the page and causing the height of #header to become zero.
#header > div {
display: inline-block;
width: 31%;
margin: 5px 1%;
}
Demo
You can do something like this:
HTML
<div>
<div id="left">Left</div>
<div id="right">Right</div>
<div id="center">Center</div>
</div>
CSS
#left {
float: left;
border: 1px solid red;
}
#right {
float: right;
border: 1px solid blue;
}
#center {
margin-left: 50px;
margin-right: 50px;
border: 1px solid green;
text-align: center;
}
The centered <div> must come as the last one in the HTML code.
Here's a JS Bin to test: http://jsbin.com/evagat/2/edit
<style type="text/css">
body {
margin:0;
}
#header {
width:100%;
**strong text**margin:auto;
height:10%;
background-color:red;
}
#left {
width:20%;
float:left;
#margin:auto auto auto auto;
height:100%;
background-color:blue;
}
#right {
float:right;
width:20%;
#margin:auto auto auto auto;
height:100%;
background-color:green;
}
#middle {
position:relative;
left:0;
right:0;
margin:auto;
height:80%;
background-color:yellow;
width:100%;
}
#middle1 {
width: 80%;
margin:auto;
height:45%;
background-color:black;
}
#middle2 {
width: 80%;
margin:auto;
height:40%;
background-color:brown;
}
#middle3 {
width: 80%;
margin:auto;
height:15%;
background-color:orange;
}
#midmain {
width: auto;
margin:auto;
height:100%;
background-color:white;
}
#footer {
width:100%;
margin:auto;
height:10%;
background-color:red;
}
</style>
now check comment for html design.
css
#content2
{
clear:both;
width:1024px;
height:auto;
position:relative;
}
#content2 div:first-child
{
background:#E4ECF7;
width:445px;
height:25px;
margin:15px 0px 0px 223px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border:1px solid #E0DCD1;
padding:5px 0px 0px 5px;
position:absolute;
}
#content2 div:last-child
{
width:1024px;
height:200px;
position:absolute;
border:1px solid #E0DCD1;
clear:both;
}
Html
<div id="content2">
<div>content</div>
<div>content</div>
</div>
Result
div1 is showing inside div2
I need
div1 then
div2
Please help me.
why using position absolute,no need for clear property for last-child
#content2
{
clear:both;
width:1024px;
height:auto;
position:relative;
}
#content2 div:first-child
{
background:#E4ECF7;
width:445px;
height:25px;
margin:15px 0px 0px 223px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border:1px solid #E0DCD1;
padding:5px 0px 0px 5px;
/*position:absolute;*/
}
#content2 div:last-child
{
width:1024px;
height:200px;
/*position:absolute;*/
border:1px solid #E0DCD1;
/*clear:both;*/
}
div are cleared by default unless after using float property
remove position absolute from both child divs...
If you are using Position: absolute; specify the margin for both div's.
eg:
#content2 div:last-child
{
width:1024px;
height:200px;
position:absolute;
margin-top: xxx; /* specify the top margin */
border:1px solid #E0DCD1;
clear:both;
}
i think you are looking like this :- http://tinkerbin.com/3qRLgscO
Actually you made CSS bit of complicated for yourself.You can get your desired results through very simple CSS without using of positioning.
And if we are using float than we should use the clear for clearing the floated div's otherwise no need to use the clear property.
Here is the simple code of yours i have some simple changes in your CSS.....
HTML
<div id="content2">
<div>div1</div>
<div>div2</div>
</div>
CSS
#content2 {
background: none repeat scroll 0 0 red;
height: 200px;
width: 1024px;
}
#content2 div:first-child {
background: none repeat scroll 0 0 #E4ECF7;
height: 45px;
}
#content2 div:last-child {
background: none repeat scroll 0 0 yellow;
border: 1px solid #E0DCD1;
height: 45px;
}
I hope this will help you........
you can use the following properties in your div class.
float:left
clear:right;
I am using CSS to float a div next to another one. This div only appears if the user is looking at their own "business." When I don't clear anything, a large space appears between these divs and the next one. When I do clear the float, the text in the next div is pushed to the left. I think I am misunderstanding something about how to use the float and clear. I'm not very good with CSS.
How can I remove the space without destroying the "fs" div?
Here are pictures to show what is happening:
Here's the CSS and HTML code:
div.stuff {
border-bottom:dotted 1px;
border-left:dotted 1px;
border-right:dotted 1px;
border-top:dotted 1px;
padding:10px;
margin:10px;
width:35%;
height:65px;
border-radius: 5px;
}
div.container {
border-bottom:dotted 1px;
border-left:dotted 1px;
border-right:dotted 1px;
border-top:dotted 1px;
padding:10px;
padding-left:25px;
margin-bottom:10px;
position:relative;
height:65px;
width:45%;
top:-97px;
right:10px;
border-radius: 5px;
overflow: hidden;
float:right;
clear:right;
}
div.fs {
border-style:double;
text-align:center;
padding:10px;
margin:10px;
margin-left:20%;
width:60%;
border-radius: 5px;
}
<div class=stuff>
<img src=/economy/images/cash.png> Cash on Hand: 10,245<br>
<img src=/economy/images/worker.png> Workers Employed: 6<br>
<img src=/economy/images/machine.png> Machines Leased: 4
</div>
<div class=container>
Click Here to Manage Cash on Hand.<br>
Click Here to Manage this Business.<br>
Click Here to Disband this Business.
</div>
<br>
<div class=fs><a href=/economy.php?section=fs&id=7>Historical Financial Statements</a></div>
You need to float your left hand div, and use clear:both on the div at the bottom. I've made some changes in this jsFiddle.
perhaps this:
div.container {
border-bottom:dotted 1px;
border-left:dotted 1px;
border-right:dotted 1px;
border-top:dotted 1px;
padding:10px;
padding-left:25px;
margin-bottom:10px;
position:relative;
height:65px;
width:45%;
/*top:-97px;*/
margin-top:-97;
right:10px;
border-radius: 5px;
overflow: hidden;
float:right;
/*clear:right;*/
}
I would float your div.stuff to the left and your div.container to the right and just use clear: both on the div.fs element. I made a small fiddle to illustrate this. In this fiddle I added a wrapper class for clarity where I set a min-width to prevent that the right div floats down one line when the browser window is resized. Try it out!
Here's the CSS:
div.stuff {
border: 1px dotted black;
padding:10px;
margin:10px;
width:35%;
height:65px;
border-radius: 5px;
float: left;
}
div.container {
border: 1px dotted black;
padding:10px;
padding-left:25px;
margin-bottom:10px;
position:relative;
height:65px;
width:45%;
margin: 10px;
border-radius: 5px;
overflow: hidden;
float:right;
}
div.fs {
clear: both;
border-style:double;
text-align:center;
padding:10px;
margin:10px;
margin-left:20%;
width:60%;
border-radius: 5px;
}
I am trying to something pretty simple.
I have two buttons inside a div. One needs to be float right, one needs to be float left
<div class="btnwrapper">
<div class="btnright"><span>Continue</span></div>
<div class="btnleft"><span>Back</span></div>
<div style="clear:both;"></div>
</div>
And the corresponding CSS
.calculator .btnwrapper { width:607px; }
.calculator .btnleft { float:left; border:1px solid green; }
.calculator .btnright { float:right; border:1px solid red; }
a.button { background:url(../images/bg-button-left.gif) no-repeat; float:right; height:29px; width:auto; padding:0 0 0 8px; display:block; color:#FFF; text-decoration:none; font-weight:bold; font-size:13px; cursor:pointer;}
a.button span { background:url(../images/bg-button-right.gif) top right; height:16px; padding:8px 8px 5px 0px; display:block; width:auto; cursor:pointer; }
Here is the results I'm getting in IE7. All other modern browsers handle this correctly.
Remove float: right from a.button.
With it: http://jsfiddle.net/K8XQr/
Without it: http://jsfiddle.net/K8XQr/1/
They look identical, except that losing float: right fixes it in IE7.