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
Related
I am currently coding my first website, and one of the elements I have are "story blocks" that are a fixed width and split between images and text, but all in one div. Here is an image for reference: http://i.imgur.com/FAbi4xF.jpg?1.
Let me explain the different parts going on here: an image with a slight black overlay as well as text on the left, and then text describing the story on the right. Currently, I have an inefficient way of creating this element, involving two separate divs and disparate headers for the story titles. Here is the HTML:
<div class="story-image">
<h2 class="story-head">STORY TITLE</h2>
<img src="http://gearpatrol.com/wp-content/uploads/2012/06/microsoft-surface-gear-patrol1.jpg"/>
</div>
<!--this ends the image and title part, begins the text part-->
<div class="story-text">
<h5>Story description.</h5>
</div>
And the CSS:
.story-image {
position: inherit;
background-color: rgba(0,0,0,.39);
margin-left: 58px;
margin-bottom: 4px;
float: left;
overflow: hidden;
width: 220px;
height: 100px;}
.story-head {
position: absolute;
text-align: center;
vertical-align: middle;
color: white;
font-weight: 800;
width:220px;
line-height:100px;}
.story-text {
background-color: white;
width: 200px;
line-height: 100px;
height:100px;
float: left;}
.story-text h5 {
padding-left:8px;
padding-top: 20px;
vertical-align: middle; }
As you can see, it isn't the most efficient way of doing this sort of thing and can cause issues where the two elements break away from eachother (example here: http://i.imgur.com/eBF8Rwa.png). I cannot figure out a way to have one single div that is divided between image and text. Does anyone know of a possible way to do this? Thank you and happy holidays!
Try this:
CSS
.container {
width:400px;
display:inline-block;
height:80px;
margin-right:10px;
padding:0;
}
.left {
display:table-cell;
vertical-align:middle;
width:120px;
margin:0;
padding:0;
height:80px;
background-image:url(URL);
background-size:100%;
}
.right {
display:table-cell;
vertical-align:middle;
width:280px;
padding:0 10px;
}
HTML
<div class="container">
<div class="left">tjen<br>a</div>
<div class="right">tjen<br>a</div>
</div>
JSFiddle demo.
The problem with the two elements becoming break appart in some situations should be gone, and you can change vertical-align:middle to top or bottom if you want the text to have a different position in the div. Hope this helps!
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>
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 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>
Here is my problem with CSS when I use the Float property
My picture: http://www.sourimage.com/show-image.php?id=fb748238bf7e4ab12001e64cb543066b
It does not look good because having many blank space among the block.
My CSS code:
.listcol{
width:180px;
float:left;
margin-right:5px;
background-color:#eceff1;
margin-top: 1px;
min-height:200px;
background-image: url(../images/colbg_btm.gif);
background-repeat: no-repeat;
background-position: bottom;
margin-bottom: 0px;
}
.listcol ul{
margin-left: 0px;
padding-left: 0px;
padding-top: 0px;
margin-top: 0px;
list-style-type: none;
}
Please take a look to review and help me to correct no any blank space on the screen!
Thanks so much!
Can't see the picture, but maybe if you express the width as a percentage of the width of the page...Instead of 180px, maybe
width: 80%;
..using whatever percentage looks best to you.
I think we need to see your html markup to be sure, but what you need to do is have a structure where block1 and block3 are in a container block. The container can float, and block2 can float. Block1 and block3 do not need to float.
can you post some of the html? Or fix the image? It looks like you took care of the left margin for your UL, but there may some extra margin lying around in some of your other block elements since they tend to come with built in margin.
i also agree with Robert Harvey. Try to use percentages where reasonable instead of pixels. it'll be more consistent across any changes the user or browser makes to screen size, font size, etc.
are block1, 2, and 3 all UL's in the listcol div?
I think u can solve your problem by giving line-height to li as "0px".
ul li {
float:left;
line-height:0px;
}
ul {
width:124px;
}
<ul>
<li><img src="images.jpeg" /></li>
<li><img src="images.jpeg" /></li>
</ul>
The space can't be avoided in current solution because it's the height of the block2 that's "pushing" down block3 when it's floated to to left.
So you will probably need a completelly different html layout to solve your request...
Please show us som more samples of how you want the page to look with more li elements of different heights.
Huynh:
You need to wrap a div around each of your columns. That should allow the boxes to flow from top to bottom within their own div, and then you can float each of the div columns. Give each div a width of 25%. You might also want to wrap the whole thing in a div, and give it a width of 100%.
I try to work around on your ideas but It's not fine.
Also, I put my HTML as below:
#content02{
width:740px;
float:left;
margin-left: 10px;
}
.wrapper{
width:760px;
margin-left:auto;
margin-right:auto;
}
.main02{
width:760px;
float:left;
background-color:#FFFFFF;
padding-bottom:20px;
padding-top: 10px;
}
.listcol{
width:180px;
float:left;
--position: absolute;
margin-right:5px;
background-color:#eceff1;
margin-top: 1px;
min-height:200px;
margin-bottom: 0px;
}
.listcol ul{
margin-left: 0px;
padding-left: 0px;
padding-top: 0px;
margin-top: 0px;
list-style-type: none;
}
.listheader{
display: block;
margin-top: 0px;
background-color: #2F404A;
color: #FFFFFF;
font-weight: bold;
font-size: 10px;
width: 180px;
padding-top: 5px;
padding-bottom: 5px;
background-position: top;
text-align: center;
}
<div class="wrapper">
<div class="main02">
<div id="content02">
<div class="listcol">
<ul>
</ul>
</div>
<div class="listcol">
<ul>
</ul>
.....
.....
</div>
Please to note that the number of block increasing dynamically and use the same style "listcol". You can see the picture depicting this issue here: http://www.sourimage.com/show-image.php?id=fb748238bf7e4ab12001e64cb543066b
Please try getting rid of "min-height" in the '.listcol'. Also, get rid og the "position: absolute" in the '.listcol'.
Let me know if that worked.
If it doesn't, you can try to modify your HTML to be in columns, so for example:
<div class="column">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="column">
<div class="box"></div>
<div class="box"></div>
</div>
And the CSS:
.column{
float: left;
width: 200px;
margin-right: 5px;
}
.box{
margin: 0px;
}