I'm currently trying to add to this python word cloud library a html export (to the existing image one).
The big problem right now is, that the underlying python image library is treating text differently. It draws the "box" around a word at the upper edge of the biggest character of the word. So the box is always as tight as possible to the text.
Browser interpret HTML + CSS differently. They don't make the box as tight as possible, but in a way that all possible characters can fit in. So if the word only consists of lower-case characters the browser will still put some space to the top for the case that there could be upper-case characters.
So my question is now how to achieve a similar behavior with such a "tight" box in CSS.
To illustrate better what I mean, here's an image
In the background you see the resulting png file from the python library, and on top of that the HTML+CSS version. The small white boxes mark the beginning of the box in the png. I put a 50% opacity background around the HTML words to show their box model.
My HTML code for this example is:
<html>
<head>
<link href="https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/html5resetcss/html5reset-1.6.1.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Droid+Sans+Mono" rel="stylesheet">
</head>
<body>
<ul style="width:400px; height: 200px; background-image: url(test.png); position: absolute; top:0;left:0;">
<li style="background-color:rgba(255, 255, 255, 0.5); padding-left: 5.5em; display: inline; list-style: none; margin: 0; padding: 0; font-family: 'Droid Sans Mono', monospace;position: absolute; color: rgb(119, 209, 83); top: 64px; left: 15px; font-size: 102px">hallo</li>
<li style="background-color:rgba(255, 255, 255, 0.5); padding-left: 5.5em; display: inline; list-style: none; margin: 0; padding: 0; font-family: 'Droid Sans Mono', monospace;transform: rotate(270deg); transform-origin: 50% 90% 0;position: absolute; color: rgb(47, 180, 124); top: 51px; left: 321px; font-size: 73px">ich</li>
<li style="background-color:rgba(255, 255, 255, 0.5); padding-left: 5.5em; display: inline; list-style: none; margin: 0; padding: 0; font-family: 'Droid Sans Mono', monospace;position: absolute; color: rgb(108, 205, 90); top: 3px; left: 99px; font-size: 61px">test</li>
<li style="background-color:rgba(255, 255, 255, 0.5); padding-left: 5.5em; display: inline; list-style: none; margin: 0; padding: 0; font-family: 'Droid Sans Mono', monospace;position: absolute; color: rgb(189, 223, 38); top: 142px; left: 114px; font-size: 59px">sie</li>
<li style="background-color:rgba(255, 255, 255, 0.5); padding-left: 5.5em; display: inline; list-style: none; margin: 0; padding: 0; font-family: 'Droid Sans Mono', monospace;position: absolute; color: rgb(168, 219, 52); top: 37px; left: 50px; font-size: 44px">du</li>
<li style="background-color:rgba(255, 255, 255, 0.5); padding-left: 5.5em; display: inline; list-style: none; margin: 0; padding: 0; font-family: 'Droid Sans Mono', monospace;position: absolute; color: rgb(31, 161, 135); top: 8px; left: 281px; font-size: 44px">er</li>
<li style="background-color:rgba(255, 255, 255, 0.5); padding-left: 5.5em; display: inline; list-style: none; margin: 0; padding: 0; font-family: 'Droid Sans Mono', monospace;position: absolute; color: rgb(41, 122, 142); top: 143px; left: 256px; font-size: 44px">es</li>
<li style="background-color:rgba(255, 255, 255, 0.5); padding-left: 5.5em; display: inline; list-style: none; margin: 0; padding: 0; font-family: 'Droid Sans Mono', monospace;position: absolute; color: rgb(69, 55, 129); top: 149px; left: 17px; font-size: 44px">wir</li>
<li style="background-color:rgba(255, 255, 255, 0.5); padding-left: 5.5em; display: inline; list-style: none; margin: 0; padding: 0; font-family: 'Droid Sans Mono', monospace;position: absolute; color: rgb(38, 173, 129); top: 34px; left: 241px; font-size: 44px">ihr</li>
<li style="background-color:rgba(255, 255, 255, 0.5); padding-left: 5.5em; display: inline; list-style: none; margin: 0; padding: 0; font-family: 'Droid Sans Mono', monospace;position: absolute; color: rgb(108, 205, 90); top: 14px; left: 318px; font-size: 41px">und</li>
<li style="background-color:rgba(255, 255, 255, 0.5); padding-left: 5.5em; display: inline; list-style: none; margin: 0; padding: 0; font-family: 'Droid Sans Mono', monospace;position: absolute; color: rgb(170, 220, 50); top: 1px; left: 2px; font-size: 37px">soll</li>
<li style="background-color:rgba(255, 255, 255, 0.5); padding-left: 5.5em; display: inline; list-style: none; margin: 0; padding: 0; font-family: 'Droid Sans Mono', monospace;position: absolute; color: rgb(31, 154, 138); top: 167px; left: 227px; font-size: 33px">dann</li>
<li style="background-color:rgba(255, 255, 255, 0.5); padding-left: 5.5em; display: inline; list-style: none; margin: 0; padding: 0; font-family: 'Droid Sans Mono', monospace;transform: rotate(270deg); transform-origin: 50% 90% 0;position: absolute; color: rgb(67, 62, 133); top: 54px; left: 176px; font-size: 33px">nun</li>
<li style="background-color:rgba(255, 255, 255, 0.5); padding-left: 5.5em; display: inline; list-style: none; margin: 0; padding: 0; font-family: 'Droid Sans Mono', monospace;transform: rotate(270deg); transform-origin: 50% 90% 0;position: absolute; color: rgb(234, 229, 26); top: 71px; left: 128px; font-size: 33px">tun</li>
</ul>
</body>
</html>
I don't think the problem can be solved in pure HTML/CSS, as the box is unaware of the actual characters in it — it just reserves height based on properties in the font.
You could either pick apart the font (using something like opentype.js, looking at the height of the characters in your box and setting its height accordingly. A simpler solution would be to draw your text on a canvas and crop the empty space around it, effectively doing what the Python version does. Downside is that your text is now an image (harder to link or select).
Related
h2 span.spacer {
padding:0 5px;
}
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
h2 {
position: absolute;
top: 50px;
left: 0;
}
<h2><span>This is the first line.<span class="spacer"></span><br/><span class="spacer"></span>This is the second line.</span></h2>
Grettings!
So I've developed a funky way of captioning an image as illustrated in the code below. However, as you can see, there are black blocks at the end of the first line and the beginning of the second line which are a darker colour, including the space between the two lines.
Is there any way in which this can be resolved?
Thanks.
h2 span.spacer {
padding:0 5px;
}
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
h2 {
position: absolute;
top: 50px;
left: 0;
}
<h2><span>This is the first line.<span class="spacer"></span><br/><span class="spacer"></span>This is the second line.</span></h2>
Like this?
h2 span.spacer {
padding:0 5px;
}
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
display: inline-block;
}
h2 {
position: absolute;
top: 50px;
left: 0;
}
<h2><span>This is the first line.<span class="spacer"></span><br/><span class="spacer"></span>This is the second line.</span></h2>
try this
h2 span.spacer {
}
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
h2 {
position: absolute;
top: 80px;
left: 0;
}
<h2><span>This is the first line.</span><br/><span>This is the second line.</span></h2>
UPDATE: Removed line between two spans
This, right? Not sure what's happening, when I post this, it shows only plain HTML :/ Hope you're seeing it properly though.
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 9px 10px;
}
h2 {
position: absolute;
top: 50px;
left: 0;
}
<h2><span>This is the first line.</span><br/><span>This is the second line.</span></h2>
Result:
Hope it helps!
This question already has answers here:
CSS - Equal Height Columns?
(11 answers)
Closed 6 years ago.
#DIV_1 {
bottom: -10px;
height: 176px;
left: 0px;
position: relative;
right: 0px;
text-align: left;
top: 10px;
width: 379px;
perspective-origin: 189.5px 88px;
transform-origin: 189.5px 88px;
background: rgb(238, 238, 238) none repeat scroll 0% 0% / auto padding-box border-box;
font: normal normal normal normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
list-style: none outside none;
margin: 0px 0px -5px;
overflow: hidden;
}/*#DIV_1*/
#DIV_2 {
box-sizing: border-box;
float: left;
height: 77px;
text-align: center;
width: 189.5px;
perspective-origin: 94.75px 38.5px;
transform-origin: 94.75px 38.5px;
border-right: 5px solid rgb(255, 255, 255);
font: normal normal normal normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
list-style: none outside none;
padding: 30px;
}/*#DIV_2*/
#DIV_3 {
box-sizing: border-box;
float: left;
height: 77px;
text-align: center;
width: 189.5px;
perspective-origin: 94.75px 38.5px;
transform-origin: 94.75px 38.5px;
font: normal normal normal normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
list-style: none outside none;
padding: 30px;
}/*#DIV_3*/
#DIV_4 {
box-sizing: border-box;
color: rgb(255, 255, 255);
float: left;
height: 99px;
text-align: center;
width: 189.5px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 94.75px 49.5px;
transform-origin: 94.75px 49.5px;
background: rgb(192, 57, 43) none repeat scroll 0% 0% / auto padding-box border-box;
border-top: 5px solid rgb(255, 255, 255);
border-right: 5px solid rgb(255, 255, 255);
border-bottom: 0px none rgb(255, 255, 255);
border-left: 0px none rgb(255, 255, 255);
font: normal normal bold normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
list-style: none outside none;
outline: rgb(255, 255, 255) none 0px;
padding: 30px;
}/*#DIV_4*/
#DIV_5 {
box-sizing: border-box;
color: rgb(255, 255, 255);
float: left;
height: 82px;
text-align: center;
width: 189.5px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 94.75px 41px;
transform-origin: 94.75px 41px;
background: rgb(142, 68, 173) none repeat scroll 0% 0% / auto padding-box border-box;
border-top: 5px solid rgb(255, 255, 255);
border-right: 0px none rgb(255, 255, 255);
border-bottom: 0px none rgb(255, 255, 255);
border-left: 0px none rgb(255, 255, 255);
font: normal normal bold normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
list-style: none outside none;
outline: rgb(255, 255, 255) none 0px;
padding: 30px;
}/*#DIV_5*/
<div id="DIV_1">
<div id="DIV_2">
Ben Franklin
</div>
<div id="DIV_3">
Thomas Jefferson
</div>
<div id="DIV_4">
George Washington
</div>
<div id="DIV_5">
Abraham Lincoln
</div>
</div>
I have 2 column that its content might have different length, thus it will have multiple lines, so how do I ensure that the least line of content have the equal height? I can't use fixed height like height:100px; because the length of the content might be more than that.
You can use flexbox to achieve equal heights. This is set on the outer wrapper div:
#DIV_1 {
display: flex;
flex-wrap: wrap;
}
You'll also need to remove the fixed heights and float on the inner divs. If you also want the content in the inner divs to be vertically centered you can make then display:
#DIV_2,
#DIV_3,
#DIV_4,
#DIV_5 {
display: flex;
flex-direction: column;
justify-content: center;
}
#DIV_1 {
bottom: -10px;
display: flex;
flex-wrap: wrap;
left: 0px;
position: relative;
right: 0px;
text-align: left;
top: 10px;
width: 379px;
perspective-origin: 189.5px 88px;
transform-origin: 189.5px 88px;
background: rgb(238, 238, 238) none repeat scroll 0% 0% / auto padding-box border-box;
font: normal normal normal normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
list-style: none outside none;
margin: 0px 0px -5px;
overflow: hidden;
}/*#DIV_1*/
#DIV_2 {
box-sizing: border-box;
text-align: center;
width: 189.5px;
perspective-origin: 94.75px 38.5px;
transform-origin: 94.75px 38.5px;
border-right: 5px solid rgb(255, 255, 255);
font: normal normal normal normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
list-style: none outside none;
padding: 30px;
}/*#DIV_2*/
#DIV_3 {
box-sizing: border-box;
text-align: center;
width: 189.5px;
perspective-origin: 94.75px 38.5px;
transform-origin: 94.75px 38.5px;
font: normal normal normal normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
list-style: none outside none;
padding: 30px;
}/*#DIV_3*/
#DIV_4 {
box-sizing: border-box;
color: rgb(255, 255, 255);
text-align: center;
width: 189.5px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 94.75px 49.5px;
transform-origin: 94.75px 49.5px;
background: rgb(192, 57, 43) none repeat scroll 0% 0% / auto padding-box border-box;
border-top: 5px solid rgb(255, 255, 255);
border-right: 5px solid rgb(255, 255, 255);
border-bottom: 0px none rgb(255, 255, 255);
border-left: 0px none rgb(255, 255, 255);
font: normal normal bold normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
list-style: none outside none;
outline: rgb(255, 255, 255) none 0px;
padding: 30px;
}/*#DIV_4*/
#DIV_5 {
box-sizing: border-box;
color: rgb(255, 255, 255);
text-align: center;
width: 189.5px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 94.75px 41px;
transform-origin: 94.75px 41px;
background: rgb(142, 68, 173) none repeat scroll 0% 0% / auto padding-box border-box;
border-top: 5px solid rgb(255, 255, 255);
border-right: 0px none rgb(255, 255, 255);
border-bottom: 0px none rgb(255, 255, 255);
border-left: 0px none rgb(255, 255, 255);
font: normal normal bold normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
list-style: none outside none;
outline: rgb(255, 255, 255) none 0px;
padding: 30px;
}/*#DIV_5*/
<div id="DIV_1">
<div id="DIV_2">
Ben Franklin
</div>
<div id="DIV_3">
Thomas Jefferson
</div>
<div id="DIV_4">
George Washington
</div>
<div id="DIV_5">
Abraham Lincoln
</div>
</div>
I'm having trouble fitting any amount of content inside the entire block div, I've tried to set the height to auto however that didn't work, I've tried the overflow property which didn't work as well. I would like the entire div height to expand when there is more content because I'm dynamically changing the content, I'm not understanding why the entire div height is not expanding as there is more content inside it. Below is the example.
Please provide thorough explanation to why the div height is not expanding.
#entire-block {
bottom: 50px;
box-shadow: rgb(159, 159, 155) 4px 4px 4px -1px;
box-sizing: border-box;
/* min-height: 136px; */
height: auto;
position: fixed;
overflow: ;
right: 0px;
width: 370px;
z-index: 999;
background: rgb(215, 215, 210) none repeat scroll 0% 0% / auto padding-box border-box;
font: normal normal normal 16px/16px'Times New Roman';
padding: 10px 10px 13px;
}
/*#DIV_1*/
#A_2 {
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
display: none;
left: 5px;
position: fixed;
text-decoration: none solid rgb(255, 255, 255);
top: 43px;
z-index: 999;
border: 0px none rgb(255, 255, 255);
font: normal normal normal 25px/25px'Source Sans Pro ExtraLight';
outline: rgb(255, 255, 255) none 0px;
}
/*#A_2*/
#x {
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
display: block;
float: right;
height: 44px;
text-decoration: none solid rgb(255, 255, 255);
width: 21px;
border: 0px none rgb(255, 255, 255);
font: normal normal normal 44px/44px'Source Sans Pro ExtraLight';
margin: -11px 0px 0px;
outline: rgb(255, 255, 255) none 0px;
}
/*#A_3*/
#entire-content-section {
box-sizing: border-box;
height: 113px;
width: 350px;
font: normal normal normal 16px/16px'Times New Roman';
}
/*#DIV_4*/
#IMG_5 {
box-sizing: border-box;
display: block;
float: left;
height: auto;
width: 40px;
font: normal normal normal 16px/16px'Times New Roman';
margin: 0px 10px 0px 0px;
}
/*#IMG_5*/
#top-content-section {
box-sizing: border-box;
height: 90px;
width: 350px;
font: normal normal normal 16px/16px'Times New Roman';
}
/*#DIV_6*/
#content-header {
box-sizing: border-box;
height: 56px;
width: 350px;
font: normal normal normal 28px/28px league_gothicregular;
margin: 0px;
padding-top: 1%;
}
/*#H3_7*/
#middle-content {
box-sizing: border-box;
font: normal normal normal 16px/16px'Source Sans Pro';
}
/*#SPAN_8*/
#content-bottom {
box-sizing: border-box;
color: rgb(0, 173, 237);
cursor: pointer;
display: block;
height: 12px;
letter-spacing: 1.6799999475479126px;
text-decoration: none solid rgb(0, 173, 237);
text-transform: uppercase;
width: 350px;
border: 0px none rgb(0, 173, 237);
font: normal normal normal 12px/12px'Source Sans Pro Black';
margin: 11px 0px 0px;
outline: rgb(0, 173, 237) none 0px;
}
/*#A_11*/
<div id="entire-block">
<a id="x">×</a>
<div id="entire-content-section">
<img src="http://www.ratemyprofessors.com/assets/average-icon-b4b6eb5e309d26486d76ecebe920220f.jpg?1455038037" id="IMG_5" alt='' />
<div id="top-content-section">
<h3 id="content-header">
Average
</h3> <span id="middle-content">Attending class is not necessary, but reading the textbook is a must. I attended all of his classes for ECON1000 but didn't find it helpful, so I never went to class for ECON1010. Do your readings and study from the test banks. With some effort, you're guaranteed to get an A. Would take his class again.</span>
</div>
Find out what students are saying.
</div>
</div>
You have fixed the height that's why it is showing of fixed height. Remove height from #entire-content-section and #top-content-section.
This question already has answers here:
Line before and after title over image [duplicate]
(2 answers)
Closed 7 years ago.
I am trying to draw two horizontal lines across a box:
http://codepen.io/anon/pen/gpZqOQ
I used a plugin to generate some code based on a design. However the end result is not optimized.
<h1 id="H1_1">
<span id="SPAN_2">Feedback</span>
</h1>
#H1_1 {
box-sizing: border-box;
clear: both;
color: rgb(64, 64, 64);
height: 45px;
position: relative;
text-align: center;
width: 1140px;
perspective-origin: 570px 22.5px;
transform-origin: 570px 22.5px;
border: 0px none rgb(64, 64, 64);
font: normal normal normal normal 15px/22.5px 'Source Sans Pro', sans-serif;
margin: 0px 0px 70px;
outline: rgb(64, 64, 64) none 0px;
}/*#H1_1*/
#H1_1:after {
box-sizing: border-box;
color: rgb(64, 64, 64);
display: block;
height: 1px;
left: 0px;
position: absolute;
text-align: center;
top: 22.5px;
width: 1140px;
align-self: stretch;
perspective-origin: 570px 0.5px;
transform-origin: 570px 0.5px;
content: '"' '"';
background: rgb(189, 195, 199) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(64, 64, 64);
font: normal normal normal normal 15px/22.5px 'Source Sans Pro', sans-serif;
outline: rgb(64, 64, 64) none 0px;
}/*#H1_1:after*/
#SPAN_2 {
box-sizing: border-box;
color: rgb(189, 195, 199);
display: inline-block;
height: 45px;
position: relative;
text-align: center;
text-transform: uppercase;
width: 108.890625px;
z-index: 10;
perspective-origin: 54.4375px 22.5px;
transform-origin: 54.4375px 22.5px;
background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
border: 3px solid rgb(189, 195, 199);
font: normal normal bold normal 15px/normal Montserrat, sans-serif;
outline: rgb(189, 195, 199) none 0px;
padding: 10px 20px;
transition: all 0.2s ease 0s;
}/*#SPAN_2*/
Is there any other simpler way to achieve this via CSS?
<hr style=" width : 100%;">
<span id="SPAN_2">Feedback</span>
Apply following CSS
hr{
display: inline-block;
margin: 25px 0;
position: absolute;
}
#SPAN_2 {
position: absolute;
z-index: 2;
display: inline-block;
border: 3px solid rgb(189, 195, 199);
outline: rgb(189, 195, 199) none 0px;
padding: 10px 20px;
margin: 0 0 0 50%;
}
Try this:
<div>
bla
</div>
in combination with:
div {
padding: 80px;
background-color: red;
border-top: 5px double black;
border-bottom: 3px dotted black;
}
See http://jsfiddle.net/4ghvvke3/ to get the idea.
Or do I misunderstand your question, and do you wish to have a line behind your main box object?
I that case I advise background-image of 1px width with x-repeat, probably less bytes than all the CSS code.
Demo
using :before and :after like you have it, i added a classname instead of random ids
<h1 class="feedback">
<span>Feedback</span>
</h1>
css
.feedback {
position: relative;
text-align: center;
}
.feedback span {
box-sizing: border-box;
color: rgb(189, 195, 199);
display: inline-block;
height: 45px;
position: relative;
text-align: center;
text-transform: uppercase;
width: auto;
z-index: 10;
perspective-origin: 54.4375px 22.5px;
transform-origin: 54.4375px 22.5px;
background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
border: 3px solid rgb(189, 195, 199);
font: normal normal bold normal 15px/normal Montserrat, sans-serif;
outline: rgb(189, 195, 199) none 0px;
padding: 10px 20px;
transition: all 0.2s ease 0s;
position: relative;
z-index: 1;
}
.feedback:before,
.feedback:after {
content: '';
display: inline-block;
border: 1px solid rgb(189, 195, 199);
width: 100%;
position: absolute;
z-index: 0;
left: 0;
}
.feedback:before {
top: 40%;
}
.feedback:after {
bottom: 40%;
}
I made a simple fiddle to demonstrate the simplest way of achieving this.
<div id="box">
<hr class="line1">
<hr class="line2">
</div>
And CSS:
#box {
width: 85%;
margin: 0 auto;
}
.line1 {
width: 100%;
}
.line2 {
width: 100%;
}
This uses the hr property to draw 2 lines horizontally, in this case taking up 100% width of the parent container.
Or something like this for thinner lines.
.container {
width: 100%;
margin-top:3em;
text-align:center;
}
.feedback_box {
color: rgb(189, 195, 199);
line-height:45px;
text-align: center;
text-transform: uppercase;
background: rgb(255, 255, 255);
border: 3px solid rgb(189, 195, 199);
font: normal normal bold normal 15px/normal Montserrat, sans-serif;
padding: 1em;
z-index:4;
position:relative;
}
.line1, .line2 {
border:0;
height:3px;
background:rgb(189, 195, 199);
}
.line1 {
margin-bottom:-20px;
}
.line2 {
margin-top:-20px;
}
<div class="container">
<hr class="line1">
<span class="feedback_box">Feedback</span>
<hr class="line2">
</div>
So I'm trying to align 2 divs side by side. Here's my markup
<div id="DIV_1">
<div id="DIV_2">
</div>
<div id="DIV_3">
<div id="DIV_4">
<div id="DIV_5">
0
</div>
<div id="DIV_6">
Likes
</div>
</div>
<div id="DIV_7">
<div id="DIV_8">
1
</div>
<div id="DIV_10">
Followers
</div>
</div>
</div>
</div>
And my CSS
#DIV_1 {
height: 81px;
width: 864px;
perspective-origin: 432px 40.5px;
transform-origin: 432px 40.5px;
font: normal normal normal 16px/normal sans-serif;
}/*#DIV_1*/
#DIV_2 {
height: 40px;
width: 40px;
perspective-origin: 20px 20px;
transform-origin: 20px 20px;
background: rgb(0, 157, 255) none repeat scroll 0% 0% / auto padding-box border-box;
font: normal normal normal 16px/normal sans-serif;
}/*#DIV_2*/
#DIV_3 {
height: 41px;
text-align: center;
width: 187px;
perspective-origin: 93.5px 20.5px;
transform-origin: 93.5px 20.5px;
font: normal normal normal 16px/normal sans-serif;
margin: 0px 338.5px;
}/*#DIV_3*/
#DIV_4 {
color: rgb(70, 70, 70);
display: table-cell;
height: 33px;
text-align: center;
text-decoration: none solid rgb(70, 70, 70);
vertical-align: middle;
width: 92px;
perspective-origin: 46.5px 20.5px;
transform-origin: 46.5px 20.5px;
border-top: 0px none rgb(70, 70, 70);
border-right: 1px solid rgb(146, 146, 146);
border-bottom: 0px none rgb(70, 70, 70);
border-left: 0px none rgb(70, 70, 70);
font: normal normal normal 16px/normal 'Helvetica Neue', Helvetica, Arial, sans-serif;
outline: rgb(70, 70, 70) none 0px;
padding: 4px 0px;
}/*#DIV_4*/
#DIV_5 {
color: rgb(70, 70, 70);
height: 17px;
letter-spacing: 0.18000000715255737px;
text-align: center;
text-decoration: none solid rgb(70, 70, 70);
width: 92px;
perspective-origin: 46px 8.5px;
transform-origin: 46px 8.5px;
border: 0px none rgb(70, 70, 70);
font: normal normal 500 15px/17px 'Helvetica Neue', Helvetica, Arial, sans-serif;
outline: rgb(70, 70, 70) none 0px;
}/*#DIV_5*/
#DIV_6 {
color: rgb(70, 70, 70);
height: 16px;
letter-spacing: 0.3479999899864197px;
text-align: center;
text-decoration: none solid rgb(70, 70, 70);
width: 92px;
perspective-origin: 46px 8px;
transform-origin: 46px 8px;
border: 0px none rgb(70, 70, 70);
font: normal normal 300 12px/16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
outline: rgb(70, 70, 70) none 0px;
}/*#DIV_6*/
#DIV_7 {
color: rgb(70, 70, 70);
display: table-cell;
height: 33px;
text-align: center;
text-decoration: none solid rgb(70, 70, 70);
vertical-align: middle;
width: 94px;
perspective-origin: 47px 20.5px;
transform-origin: 47px 20.5px;
border: 0px none rgb(70, 70, 70);
font: normal normal normal 16px/normal 'Helvetica Neue', Helvetica, Arial, sans-serif;
outline: rgb(70, 70, 70) none 0px;
padding: 4px 0px;
}/*#DIV_7*/
#DIV_8 {
color: rgb(70, 70, 70);
height: 17px;
letter-spacing: 0.18000000715255737px;
text-align: center;
text-decoration: none solid rgb(70, 70, 70);
width: 94px;
perspective-origin: 47px 8.5px;
transform-origin: 47px 8.5px;
border: 0px none rgb(70, 70, 70);
font: normal normal 500 12px/17px 'Helvetica Neue', Helvetica, Arial, sans-serif;
outline: rgb(70, 70, 70) none 0px;
}/*#DIV_8*/
#A_9 {
color: rgb(102, 153, 255);
letter-spacing: 0.18000000715255737px;
text-align: center;
text-decoration: none solid rgb(102, 153, 255);
border: 0px none rgb(102, 153, 255);
font: normal normal 500 15px/17px 'Helvetica Neue', Helvetica, Arial, sans-serif;
outline: rgb(102, 153, 255) none 0px;
}/*#A_9*/
#DIV_10 {
color: rgb(70, 70, 70);
height: 16px;
letter-spacing: 0.3479999899864197px;
text-align: center;
text-decoration: none solid rgb(70, 70, 70);
width: 94px;
perspective-origin: 47px 8px;
transform-origin: 47px 8px;
border: 0px none rgb(70, 70, 70);
font: normal normal 300 12px/16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
outline: rgb(70, 70, 70) none 0px;
}/*#DIV_10*/
I've tried changing the display and everything. For some reason I just can't get the square to be vertically aligned with the other following count. Also here's a demo http://jsfiddle.net/z6jAA/1/
Add display: inline-block on #DIV_2 and #DIV_3, and remove the margin on #DIV_3.
Fiddle: http://jsfiddle.net/z6jAA/2/
Have you tried using the following properties and values for the CSS declaration?
#idName { float: left; position: relative; }
Code example:
HTML
<div id="div1">bla </div>
<div id="div2"> bla2</div>
CSS
#div1 {
float: left;
position: relative;
}
#div2 {
float: left;
position: relative;
}