So I have three divs.
I want them to float like this: 1st /2nd /3rd so all in the same line. With my code it doesnt work. Can you help me?
this is my code: html:
<div id="holder"><h5>something</h5></div>
<div id="visual_holder">something2</div>
<div id="invest"><h2>something3</h2></div>
css:
#holder{
width:200px;
padding-right:48px;
padding-left:32px;
padding-top:32px;
display:inline-block;
}
#visual_holder{
font-family: "Times New Roman";
font-size:7.5em;
text-transform:uppercase;
line-height:60%;
float:right;
padding-top:32px;
}
#invest{float:right;}
Thank for your help!
Shouldn't they be all float left?
See example here and update as needed: http://jsfiddle.net/tRNpQ/
#holder{
width:200px;
padding-right:48px;
padding-left:32px;
padding-top:32px;
float:left;
}
#visual_holder{
font-family: "Times New Roman";
font-size:1.5em;
text-transform:uppercase;
line-height:60%;
float:left;
padding-top:32px;
}
#invest{float:left;}
Try to just exchange the visual_holder and invest divs:
<div id="holder"><h5>something</h5></div>
<div id="invest"><h2>something3</h2></div>
<div id="visual_holder">something2</div>
It appears that you have to first put the rightmost div. See also here: CSS Float multiple left-floated elements and one right floated
Just exchange position of your divs like below
<div id="holder"><h5>something</h5></div>
<div id="invest"><h2>something3</h2></div>
<div id="visual_holder">something2</div>
Related
Here is the html code
<div>
<div class="fractop"><span>11</span></div>
<div class="fracbottom">2</div>
</div>
<div>
<div class="fractop"><span>5</span></div>
<div class="fracbottom">2</div>
</div>
Here is the css code
<style>
.fractop{
border-bottom:solid black 0px;
display:inline-block;
float:left;
margin-top:20px;
text-align:center;
width:100%;
}
.fracbottom{
display:inline-block;
clear:left;
float:left;
width:100%;
text-align:center;
}
.fractop span{
border-bottom:solid black 3px;
}
</style>
I need to make the "divide by" line for fractions stay fixed for 2 digits. It need not become longer or shorter dynamically.
change your .fractop span to this
.fractop span{
border-bottom:solid black 3px;
width: 17px;
display: inline-block;
}
while your approach isn't the best and you're over complicating things, to give you an answer within that approach, change your CSS to this:
.fractop{border-bottom:solid black 0px; display:block; margin-top:20px; text-align:center; width:15px; margin:0; padding:0 3px;border-bottom:solid black 3px;}
.fracbottom{ display:block; margin-top:20px; text-align:center; width:15px; margin:0; padding:0 3px;}
see fiddle here and change it at will
Here,
I have a working demo in this fiddle - put an HR between your two numbers, then style it as a line - does as you prescribe. I also added some inline styling to the parent div to help. You can easily move that to it's own css class though.
http://jsfiddle.net/rrp46faj/2/
<div style="width:20px !important;"><div class="fractop"><span>11</span></div>
<hr>
<div class="fracbottom">2</div>
</div>
<div style="width:20px;"><div class="fractop"><span>5</span></div>
<hr>
<div class="fracbottom">2</div>
</div>
You can use this ⁄
Example : <div class="fractop">4.0000 ⁄ 5.3456</div>
You can find more details here http://webdesign.about.com/od/localization/l/blhtmlcodes-math.htm
You can also see MathJax
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Closed 8 years ago.
I am trying to align text at the bottom of a Div and the Middle of a Div. The CSS attribute
vertical-align:text-bottom; seems to do nothing?
I have 3 divs and would like to center the div xrLabel1 and the other div xrLabel5 to put the text at the bottom.
I have included some sample code.
Thanks
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="format.css"/>
<title></title>
</head>
<body>
<div class="TopMargin">
<div class="xrLabel2">xrLabel2</div>
<div class="xrLabel1">xrLabel1</div>
<div class="xrLabel5">xrLabel5</div>
</div>
</body>
</html>
The CSS file format.css
.TopMargin
{
position:absolute;
left:0px;
top:0px;
height:92px;
width:650px;
background-color:#808080;
color:#000000;
}
.xrLabel2
{
position:absolute;
left:225px;
top:17px;
height:67px;
width:99px;
background-color:#FFFFFF;
color:#000000;
text-align:center;
vertical-align:text-middle;
font-family:Times New Roman ;font-size:9.75pt;text-decoration:underline;
}
.xrLabel1
{
position:absolute;
left:367px;
top:8px;
height:75px;
width:99px;
background-color:#FFFFFF;
color:#000000;
text-align:right;
vertical-align:text-bottom;
font-family:Times New Roman ;font-size:9.75pt;text-decoration:underline;
}
.xrLabel5
{
position:absolute;
left:75px;
top:8px;
height:75px;
width:99px;
background-color:#FFFFFF;
color:#000000;
text-align:center;
vertical-align:text-top;
font-family:Times New Roman;font-size:9.75pt;
}
You need to use display:table on the parent element, and display:table-cell; vertical-align:bottom; for the children. Example here: http://jsfiddle.net/hAScR/
Block elements does not support vertical-align as such. You need to set the display attribute to table-cell. Then you can use vertical-align.
http://jsfiddle.net/kuUHV/
You could use text-align:center on the parent element. And a margin-top on the child element.
<div id="outer"> #text-align:center
<div class="inner">Radom text </div> # margin-top:__
</div>
Fiddle Demo :)
Note: // Don´t use this for responsive Design - when you resize the window the element will stay on the same spot if the element gets to small.
(Utilizing only css and html for compatibility reasons)
I currently have a menu that I'm including on multiple pages (via object with links targeting parent) and I'm trying to center the div horizontally. Using the width of 969px set and margins it centers properly but when the window size becomes too small the menu vanishes completely.
Here is the code I've constructed so far:
<link href="thestyles.css" rel="stylesheet" media="screen">
<div id='themagic'>
<div class='pipe'>|</div>
<div id='navbutton'>Home</div> <div class='pipe'>|</div>
<div id='navbutton'>Heroin Hypothesized</div> <div class='pipe'>|</div>
<div id='navbutton'>Pain Relief</div> <div class='pipe'>|</div>
<div id='navbutton'>IPF End-Of-Life Care</div> <div class='pipe'>|</div>
<div id='navbutton'>Heroin Assisted Treatment</div> <div class='pipe'>|</div>
<div id='navbutton'>Works Cited</div> <div class='pipe'>|</div>
</div>
As well here is the CSS I've constructed:
(Note I've gone through many different approaches to this, none of which yielded the correct results, so some of this may be "throw away")
#nav
{
float:left;
width:100%;
height:auto;
overflow:hidden;
}
#themagic{
width:969px;
margin-left:auto;
margin-right:auto;
}
#navbutton
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
background: #e8edff;
color: #669;
display: inline-block;
vertical-align: middle;
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
border-radius: 15px;
padding: 15px;
float:left;
font-size:75%;
}
#navbutton:hover
{
background:#D0DAFD;
color:#333399;
}
.pipe
{
color:#669;
float:left;
padding:15px;
}
To center a div, just add this css to it
#div{
margin-left:auto;
margin-right:auto;
}
You have used id navbutton times. IDs cannot be same. They must be unique.
Use class instead.
Try:
#themagic{text-align:center;}
.navbutton,.pipe{display:inline-block;} /* remove float:left*/
NOTE:
inline-block adds white-space between elements. To remove white space, write elements on same line instead of writing them on separate lines.
Change
<div class='pipe'>|</div>
<div id='navbutton'>Home</div> <div class='pipe'>|</div>..
to
<div class='pipe'>|</div><div class='navbutton'>Home</div><div....
DEMO here.
You could simply try changing #themagic to a fluid width, for example 100%.
http://jsfiddle.net/eshellborn/AdLcx/
My floats are acting strange (well I guess they're acting how they're supposed to), but I can't seem to understand why. For some reason the div box that contains 'Alex' always goes down to another line. Is there something I'm messing up?
style.css
.clear {
clear:both;
}
.page-header {
width:100%;
background:#efefef;
border-bottom:1px #ddd solid;
padding:3px 10px;
margin-bottom:24px;
}
.page-header-title {
width:200px;
float:none;
}
.page-header-search {
float:left;
width:100px;
}
.page-header-top_menu {
float:right;
width:200px;
}
index.html
<div class="page-header">
<div class="page-header-search">
blah
</div>
<div class="page-header-title">
Calender
</div>
<div class="page-header-top_menu">
Alex
</div>
<div class="clear"></div>
</div>
Thank you very much.
If you exchange the
float: none;
for the "calender"-div with
float: left;
the "Alex" behaves better.
You didn't specify how it should look like.
http://jsfiddle.net/wDp3p/ << I visualized your div-structure with red borders.
http://jsfiddle.net/wDp3p/1/ << version with float: left;
"float" is not really for solutions like table columns but for floating - so the "calender"-div floats directly after its left hand previous element.
You're floating it wrongly. You should assign a float property to .page-header-title.
I have now been looking for hours (obviously not in the right place!)
Please consider this sample: http://jsfiddle.net/DYLs4/9/
<div id="wrapper">
<span id="text24">Text 24</span>
<span id="text12">Text 12</span>
<span id="icon"></span>
</div>
css:
#text24{
font-size:24px; color:#999;
}
#text12{
font-size:12px; color:#000;
}
#icon{
height:36px; width:36px;
display:inline-block;
background:url(some-icon.png);
}
What I'm trying to achieve is this:
Center vertically the text24 (relative to the image)
Align the bottom of text12 with bottom of text24
Make sure the whole thing work in IE6 -> chrome
Many thanks for your help!
Add vertical-align: middle to your image.
EDIT
Per comments, this solution also requires display:inline-block;.
This is working
http://jsfiddle.net/rizwanabbasi/frsA5/1/
I know most of designers hate use table for layout, but let me try anyway.
You can use valign of table.
Final result
http://jsfiddle.net/rizwanabbasi/frsA5/
<div id="wrapper">
<span id="text24">Text 24</span>
<span id="text12">Text 12</span>
<img src="http://www.adlittle.com/fileadmin/templates/images/rss_feed_icon.png" id="icon"/>
</div>
#wrapper{
position:absolute; left:0;
}
#text24{
font-size:24px; color:#999; font-weight:bold;
}
#text12{
font-size:12px; color:#000; font-weight:bold; }
#icon{
height:36px; width:36px;
display:inline;
vertical-align:middle;
}