I have a "bubble" with content, which is working fine. Now, I want to display a count (2 lines) which should always be in the bottom right corner of that div, INSIDE it. I tried many things but for some reason it always overlaps the div and shows outside. What am I doing wrong?
<style type="text/css">
body{
background-color:#f3f3f3;
}
.commentbox{
background-color: #ffffff;
width: 200px;
border-color: #D1D1D1;
border-radius: 4px;
border-style: solid;
border-width: 1px;
padding-bottom: 9px;
padding-left: 9px;
padding-right: 9px;
padding-top: 9px;
position:relative;
}
.count{
float:right;
text-align:right;
}
</style>
<div class="commentbox">
<div class="title">Some several lines long long long long content text goes here
</div>
<div class="count">123<br>456</div>
</div>
You are floating .count so it doesn't influence it's parent container's height.
Set overflow: hidden on the parent (.commentbox) or use one of the other float containing techniques so that it does.
Do you really need float: right; for .count? I think text-align should be enough for the desired layout.
Since you're already using position:relative on the parent div. Try this instead:
.count {
position:absolute;
right:0;
bottom:10px;
}
Probably you have to add a clear after the "count" div.
<style type="text/css">
body{
background-color:#f3f3f3;
}
.commentbox{
background-color: #ffffff;
width: 200px;
border-color: #D1D1D1;
border-radius: 4px;
border-style: solid;
border-width: 1px;
padding-bottom: 9px;
padding-left: 9px;
padding-right: 9px;
padding-top: 9px;
position:relative;
}
.count{
float:right;
text-align:right;
}
</style>
<div class="commentbox">
<div class="title">Some several lines long long long long content text goes here
</div>
<div class="count">123<br>456</div>
<div style="clear: both"></div>
</div>
Related
I feel really stupid for asking this because it seems so basic but for some reason the height of my container div is not expanding to accommodate the divs within. I'm building a customized page on Tumblr with my contact details (note: not on the index/permalink page but a separate page) and I've used divs as a sort of makeshift table because html table tags don't seem to work on customized pages on Tumblr.
[The style attributes for the container div (id: Post) is inherited from the ones for the Permalink pages.]
All relevant CSS taken from theme editor:
#cent{
background-color:#FFE5E5;
padding:5px;
position:static;
width:800px;
margin: 0px auto;
}
#post{
background-color:#fff;
border:10px ridge #ff0000;
float:none;
width:700px;
margin: 2px auto;
padding:10px;
}
.Division{
float: left;
width: 300px;
margin-left: 10px;
margin-bottom: 10px;
padding: 5px;
font-weight: bold;
}
.Division2{
float: left;
margin-left: 0px;
margin-bottom: 10px;
padding: 5px;
}
HTML on Contacts page:
<div id="cent">
<div id="post">
<div class="Division">Telephone Number:</div>
<div class="Division2">+6012-3456789</div>
<br/>
<div class="Division">E-Mail Address:</div>
<div class="Division2">sample#live.com.my</div>
<br/>
<div class="Division">Address:</div>
<div class="Division2">Line 1 <br />Line 2 <br />Line 3 <br />Line 4</div>
</div>
</div>
Oh and I made a fiddle thing here: http://jsfiddle.net/Yelrihs36/wkCQR/
So what exactly am I doing wrong? I feel like the answer is really easy and staring me right in the face and I'm going to kick myself when I find out what it is...
In this case I would recommend using a table. The div is being thrown off because of your float left statements.
The effect will be the same and it will be much easier to program and will be easier to understand if anyone else needs to see your code. I've spent many hours messing around with div, float, and display trying to make divs work like a table. I just don't think it's worth it sometimes.
I hope this helps.
You must change #post to float: left
#cent{
background-color:#FFE5E5;
padding:5px;
position:static;
width:800px;
margin: 0px auto;
}
#post{
background-color:#fff;
border:10px ridge #ff0000;
float:left;
width:700px;
margin: 2px auto;
padding:10px;
}
.Division{
float: left;
width: 300px;
margin-left: 10px;
margin-bottom: 10px;
padding: 5px;
font-weight: bold;
}
.Division2{
float: left;
margin-left: 0px;
margin-bottom: 10px;
padding: 5px;
}
corrected fiddle
As you can see in this fiddle there is a space between the two bottom divs. How do I go about fixing this issue?
The HTML
<div id="textbox"></div>
<div id="textboxSquare"></div>
<div id="textboxSquare"></div>
The CSS
* {
margin: 0; padding: 0;
}
#textbox {
border: 1px solid #848484;
-webkit-border-top-left-radius: 30px;
-moz-border-radius-topleft: 30px;
border-top-left-radius: 30px;
-webkit-border-top-right-radius: 30px;
-moz-border-radius-topright: 30px;
border-top-right-radius: 30px;
outline:0;
height:25px;
display: block;
box-sizing: border-box;
width: 300px;
padding-left:20px;
padding-right:20px;
}
#textboxSquare {
display:inline-block;
box-sizing: border-box;
height:25px;
width: 150px;
border: 1px solid #848484;
}
Put all of those <div>s on the same line and it'll go away.
It's a problem with display: inline-block;
Here's a reference for ya:
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Fixed your fiddle
Look at that didn't even notice the other error: Use an #ID only once. The document will only be searched until the very first #ID is found, then it stops.
<div id="textbox"></div>
<div id="textboxSquare"></div> <!-- This id="" must be unique to all others in the document -->
<div id="textboxSquare"></div> <!-- This id="" must be unique to all others in the document -->
Use a class instead: http://jsfiddle.net/8B875/4/
That fiddle also implements a different approach that uses a float: left; property but you'll have to adjust other things potentially if you go that route.
Add
float:left;
clear:none;
In the #textboxSquare:
#textboxSquare {
display:inline-block;
box-sizing: border-box;
height:25px;
width: 150px;
border: 1px solid #848484;
float:left;
clear:none;
}
Fiddle
Don't use negative margins.
A good way to fight is the letter-spacing trick, where you set the letter-spacing of it's parent div to 0, and then reset it inside the inline-block div to normal
Like said already don't use duplicate ID's. But that's not the problem. Use have assigned display: inline-block; to your DIV's. Simply remove this declaration and add a float:left; to these items.
just remove space between div's in your HTML like this:
<div id="textbox"></div>
<div id="textboxSquare"></div><div id="textboxSquare"></div>
or
<div id="textbox"></div>
<div id="textboxSquare"></div><!--
remove this space
--><div id="textboxSquare"></div>
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
This question already has answers here:
How to arrange many <div> elements side by side with no wrap [duplicate]
(3 answers)
Closed 8 years ago.
Here is my code:
<div class="large-6 columns">
<div id='box1'>
<div id='text1'>
Name
</div>
<div id='text3'>
LastName
</div>
</div>
</div>
CSS looks like this:
#box1 {
float: left;
height: 125px;
margin-top: 30px;
margin-bottom: 30px;
clear: none;
width: 125px;
border-top-left-radius: 95px;
border-top-right-radius: 95px;
border-bottom-right-radius: 95px;
border-bottom-left-radius: 95px;
background-color: rgb(232, 68, 58);
position:relative;
overflow:visible;
}
#text1 {
float: left;
font-size: 1em;
color: rgb(255, 255, 255);
width: 28%;
height: auto;
text-align: right;
font-weight: 400;
line-height: 1em;
word-wrap: break-word;
margin-left: 69.6%;
margin-top: 53px;
clear: none;
min-height: 0px;
min-width: 0.5em;
font-family: snippet;
overflow:auto;
}
#text3 {
float: left;
font-size: 1em;
color: rgb(0, 0, 0);
width: 72%;
height: auto;
text-align: right;
font-weight: 400;
line-height: 1em;
margin-left: 125px;
margin-top: 0px;
clear: none;
min-height: 0px;
min-width: 0.5em;
font-family: snippet;
position:relative;
overflow:visible;
}
Now this is not giving me the required result.
The Text-3 should actually appear next to the text-1. But somehow its wrapping down to the next tine.
btw. I am using this inside a Zurb Foundation code. Writing my custom class on top of the existing CSS styles.
EDIT:
Although I solved the problem, just for the clarity of some of you, Text-1 is inside the circle and is right aligned to the edge of the circle. Text-3 is outside the circle and is left aligned to the edge of the circle. Such that the two text, are next to each other, one inside the circle and one outside.
Is there a reason you are adding the margin-left to each div? Cleaned it up a little and it seems to work.
#text1 {
min-width: 0.5em;
width: 28%;
color: white;
}
#text3 {
min-width: 0.5em;
width: 72%;
color: black;
}
.inner-box {
float: left;
margin-top: 53px;
text-align: right;
font-weight: 400;
font-size: 1em;
line-height: 1em;
}
http://jsfiddle.net/ferne97/8FzN5/1/
Also think about creating a re-usable class for all that code that is getting repeated in each inner div.
http://jsfiddle.net/tahdhaze09/7FM82/
CSS:
#box1
{
width:980px;
float:left;
}
#text1{
width:450px;
float:left;
background-color:#45e64c;
}
#text3{
width:400px;
float:left;
background-color:#edc321;
}
HTML:
<div class="large-6 columns">
<div id='box1'>
<div id='text1'>
Name
</div>
<div id='text3'>
LastName
</div>
</div>
</div>
Text boxes, side by side. I left out the other CSS for simplicity.
Here's how to do this with Foundation's native architecture:
<div class="large-6 columns">
<p>Some content</p>
</div>
<div class="large-6 columns">
<p>Some more content</p>
</div>
This will give you two containers, side-by-side, spanning the full width of 960px.
I tried out the code on W3C school's
try it editor.
Your question does not really describe what you were expecting to see. Of course the "Name" and "Last name" beside each other. But within the circle? to left of it ?
I would recommend trying out the css on W3C's try it editor and playing around with the margins (margin-top, margin-left) and widths. Suggest starting by removing the margins and widths completely from the above css and then adding them one at a time. Of course check the try it editor for the changes due to each of the margin / width additions.
i am trying to add a footer to my website but the text keeps moving around.
<div id="footer">
<div id="footerchild">
1
</div>
<div id="footerchildone">
2
</div>
<div id="footerchildtwo">
3
</div>
<div id="footerchildthree">
4
</div>
</div>
and the css
#footer {
margin-left: 100px;
background: #812;
box-shadow: 1px 2px 40px 1px #444;
border: 1px solid black;
width: 1040px;
height: 300px;
position: absolute;
}
#footerchildone {
float: right;
margin-right: 500px;
margin-top: -22px;
}
#footerchildtwo {
float: right;
margin-right: 350px;
margin-top: -22px;
}
#footerchildthree {
float:right;
margin-top: -22px;
margin-right: -250px;
}
I want each column to be centrated with a specific distance, but when i move for instance childthree, the second child follows with it. It shouldnt be like that because i have given each of them a separate div. What is the problem?
I think u are trying to accomplish this:
http://jsfiddle.net/65GaS/5/
It's that simple or I misunderstood you.
http://jsfiddle.net/vvjAJ/
HTML
<div id="footer">
<div id="footerchild">1</div>
<div id="footerchildone">2</div>
<div id="footerchildtwo">3</div>
<div id="footerchildthree">4</div>
</div>
HTML
#footer
{margin-left: 100px;background: #812;box-shadow: 1px 2px 40px 1px #444;border: 1px solid black;width: 1040px;height: 300px;position: absolute;}
#footerchild{float:left;width:260px;margin-top: 50px;text-align:center;}
#footerchildone{float: left;width:260px;text-align:center;margin-top: 50px}
#footerchildtwo{float: left;width:260px;text-align:center;margin-top: 50px}
#footerchildthree{float:left; margin-top: 50px;text-align:center;width:260px;}
You need to add text-align:center to center the text for parent div and make every child div as position:relative; display:inline-block; automatically it will align center for parent div and make sure to remove float:right for child divs. hope this will work for you.