Recently I have been trying to get used to floating divs and aligning them to fit all on one line. However, I have a small problem. In one of the codes I was creating, I noticed I could not get this text to go down at all.
Here is my code:
https://jsfiddle.net/9sjyj0hy/
As you can see, the vs code is here:
<div class="fluidbox">vs.
and the end of the div is after all the other divs. The first way I tried to fix this was adding a line-height, well that only made things worse:
https://jsfiddle.net/9sjyj0hy/3/
As you can see, I edited the fluidbox to have a line-height of 100px, and the result made all divs drop down when I only need the VS text to do that. Any way to fix this?
Wrap your text "vs" inside an element and position that element.
<span class="vs">vs.</span>
.vs {
position : absolute;
margin-top : 40px;
}
I have made it work as you are saying. Have a look at the jsfiddle. The only thing you need to do is to wrap the vs in a span and add these css properties:
.fluidbox span {
position: absolute;
margin-top: 20px;
}
http://jsfiddle.net/inzamamtahir/dcgmtnua/
Related
In the CSS code below, it appears that the background of divTwo has moved behind divOne. But the content of divTwo appears to have been left behind - why does the background of the div appear to move independently of the content?
#divOne {
width: 300px;
height: 100px;
background-color: yellow;
margin:5px;
float:left
}
#divTwo {
width: 300px;
height: 100px;
padding:5px;
background-color: green;
}
<div id="divOne">Div01</div>
<div id="divTwo">Div02</div>
result in Chrome
The content of divTwo is not moving independently. The content is text, so it's rendered in a line box.
Now while unfloated, uncleared blocks ignore the presence of floated elements that precede them, the line boxes that they contain don't. The line boxes will avoid the floated element and go either alongside the floated element or, if there's no space for them there, underneath the floated element.
In your example, there is no space alongside, so the text has gone underneath the floated element. But since you've set a fixed height for divTwo, there's not enough space underneath and yet inside divTwo for the line box either. So the text content overflows divTwo, hence the text appears without divTwo's background behind it.
From Mozilla provided Float Documentation
How floats are positioned
As mentioned above, when an element is floated it is taken out of the
normal flow of the document. It is shifted to the left or right until
it touches the edge of its containing box or another floated element.
So I imagine when you declare float for divOne but not divTwo, then divTwo is following the normal flow of the document which is the same position as divOne.
You may also find Documentation for CSS Display useful.
If you do want these inline, but do not want to declare float for divTwo you can use:
#divOne {
width: 300px;
height: 100px;
background-color: yellow;
float:inline-start;
}
#divTwo {
width: 300px;
height: 100px;
padding:5px;
background-color: green;
}
This is something quite frequently met in just simple HTML. In you current code, you are not using any containers, wrappers or rows. This leads for the elements to overlap, if you want them not to overlap, you should give them some positioning or padding. In the provided fiddle, I have added a padding of 50 px for the divTwo in order to increase it's box show it is seen better.
The main idea is that you never start simply writing code but carefully think about the positioning of each element on your webpage. A good practice would be to learn how to "stack" elements( That's how I call it, the term might not be correct). Another thing is that there are some certain front end frameworks which could teach you better by example how to do this.
Bootstrap, Zurb Foundation (But Bootstrap...I'm not sure how many people use Zurb)
Here's the JS Fiddle to see how exactly the div has changed:JS Fiddle
Like #ZobmbieChowder said, the logic of CSS float property is that you have a huge box which contains two smaller boxes, and now you want one is located on the left and another on the right. If you don't have the huge box first, the complier doesn't get human's logic which one shall be the left or right. It only makes sense for machine that you "define" a container first, then talk about its element position left or right.
Alternative to #jpat827 answer would be to either set div two's clear property to left or add an empty div after div one and set it's clear property to left. What
The clear property, if there is no space left for the unfloated element, prevents the unfloated element from going under the floated element.
When you clear the div two to left, then what it really does is that it places div two below the floated element.
let's say, div one was floated to right, then you would have to clear div two to the right, in order to bring it below div one.
If, there were three divs, out of which two were floated to left and right, then the clear property for the third unfloated div must be set to both so that it can clear past elements floated in either direction.
I hope this was helpful.
Thank You
I'm trying to understand how the line-height property in CSS works. I know that it sets the spacing between lines of text. What I don't understand is why, when you set line-height the same as the height of the container, it vertically aligns the text. For example, if you did this:
.btn {
height: 22px;
line-height: 22px;
}
And create an element with the "btn" class, the text in that element will vertically align to the center and I don't understand why. To me, it makes more sense for the first line of text to appear at the very top of the container, and the second line to be at the bottom, possibly overflowing, since that will be 22px down. Can someone please tell me why it works this way, because I don't feel like I can understand the line-height property fully unless this is explained. Thank you.
line height is the amount of space above and below elements. thats pretty much all I can tell you.
If you wrap the text in a div, give the div a height, and the text grows to be 2 lines (perhaps because it is being viewed on a small screen like a phone) then the text will overlap with the elements below it. On the other hand, if you give the div a line-height and the text grows to 2 lines, the div will expand (assuming you don't also give the div a height).
Here is a link that demonstrates this
.shorty
{
height: 12px;
}
.liney
{
line-height: 25px;
}
Line height is actually referring to the top and bottom vertical spacing between the phrases. The reason why setting the same height as the line-height as it will auto centralise the invalid spaces. Sharing the similar explanation to centralising the body using margin {auto 0}
You can play with the examples available in w3schools.
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_line-height
Ref:
http://www.w3schools.com/cssref/pr_dim_line-height.asp
It helps me to understand CSS3 syntax and attributes even more.
I hope my share could help you. :)
Edited: I just happens to find a better answers to your question in here: How do I vertically center text with CSS?
I have been searching for the answer to this question for a while now but here is my issue.
I am trying to create a div that hugs the left side of the browser window and when it is hovered over, it will expand and hold more divs/text.
My question is, how do I make it so when the expanding div covers text, it does not move it, also how to make it so the text within the expanding div shrinks/grows with the div.
I have tried
position: relative
position: absolute
and all
text-align
possibilities
Here is my JSFiddle
Any help would be greatly appreciated! (Sorry if this question has been posted/answered in the past)
Updated fiddle: http://jsfiddle.net/nqm9ksv8/
Moving text below
Try absolute positioning for your .grow:
position: absolute;
That way, it'll not get into the way of other elements, instead be drawn on top of them.
Shrinking text inside
To keep the text inside from shrinking, add another div inside, which has already the desired, fixed width. Add overflow: hidden; to the .grow container. That way, the contents will be layouted, but what does not fit the container is not being displayed.
Just use min-width to prevent div from resizing.
.Site-Content-Container{min-width: 960px;}
Edited: or maybe not. position: absolute; is an option. To be honest, it is not clear which text is not meant to resize.
change your "float:left;" in .grow to "position:absolute;"
is that what you are aiming for?
I have have some dynamically created divs in a fixed width parent div and I would like to have them distributed horizontally. As they are dynamically created so I wont know how many are in the container unless I count them with JS, which I am trying to avoid.
I was originally trying out the "Using inline-block and justified text" technique on this page; however it seems to behave a bit erracticly when there are more children than will fit ( ie when there are two rows ), ( see the second row here ) so I don't think that will work.
*Edit: Actually I just realise now that it's not actually erratic, it IS spacing the second line correctly, but what I want instead (in this particular instance anyway ... ) is for the three red boxes on the second line to take up positions under the first three of the first line, leaving two positions free at the end, rather than spacing them out too ) .... so I think in general this technique is not likely to ever work for me.
Are there any suggestions of other ways to achieve the above. I would rather not have to use JS but if there is no other way then I am open to suggestions.
It's not failing, that's the native behaviour of floats.
If you want more to fit per line, made the container bigger or the boxes narrower.
If you don't want them wrapping at all, add overflow:auto to your container's CSS and you'll get a scroll bar.
You need to make remove the width of your container and add display: inline-block; to allow the dic container to have a width of whatever the content inside has. Also add overflow: auto; in order for the div to size to the amount of generated divs in it
#container {
display: inline-block;
background:olive;
overflow: auto;
height: 180px;
}
Perhaps use relative widths rather than fixed widths for the interal divs....
#testcontainer div {
width: 19%;
height: 30px;
display: inline-block;
background: red;
float: left;
margin: 2px;
}
DEMO
I ended up conceding that I need to use JS. I added id's to the fourth child and then in CSS I was able to remove the margin from the fourth child ( all of this I presume could have been done in CSS using nth child if I hadn't needed IE8 support ).
Edit: Finally ended up getting what I want - http://jsfiddle.net/byronyasgur/kUgBA/14/
I have a problem with an horizontal white space that appears inside a div without any reason. I mean, I cant' figure out WHY it appears, it just doesn't make any sense.
Here's Fiddle
The layout should be two columns: one right and one left and the latter one is larger. The problem is that on the right div I see contents shown regularly, with all alignments well shown. On the left one, its contents are lower, I mean it seems like it has a padding-top of about 5px, but there's no padding at all. The white space is INSIDE the left table-cell div, because even with plain text inside it ("Lorem ipsum"), the text is shown lower than the contents inside the right div.
HTML code is:
<div id="main_contents_cage">
<div id="main_contents_left">
<table> ... some content ... </table>
</div>
<div id="main_contents_right">
... some other content ...
</div>
</div>
CSS is:
#main_contents_cage { display: table; }
#main_contents_left, #main_contents_right { display: table-cell; }
#main_contents_left { width: 742px; }
#main_contents_right { width: 246px; border-left: 1px solid #C6C6C6; }
I searched the internet and StackOv for anyone else with the same problem without finding anyone with the same issue. Similar, but not the same at all!
I tried giving border-collapse/border-spacing to all the elements (once each, then just the "table" one, then just the "table-cell" ones, then the three of them): nothing.
I tried changing the contents of the table-cell divs, without any different result (replacing the table with other divs, or just plain text....).
Anyone has any idea?
I experienced this same issue. I too was able to "fix" the issue by assigning "vertical-align: top" to the table-cell element. This only appears to be an issue in Chorme. For me, it was the right column only (rather the left like in your example)
Ok I figured out: I need to add "vertical-align: top" to the "table-cell" divs in order for the content to display with no white space on the top!
I know in the fiddles it works but I really can't make it work on my webpage, even with no CSS (just the one I need...). (FF 13, Chrome 20).
Thank you
The contents of the div with the class of "main_contents_left" have table tags that contain no children row or grandchildren cells, could that have something to do with it?
Here is a link to my jsFiddle, if you are interested