I have something similar to below:
<div style="float:left;margin-left:5px;">Test</div>
The issue is that I need to have this div repeat multiple times. If it repeats to many times, instead of forcing you to scroll right to see the rest of it (like I want it to), it instead goes down to the next line.
Example of the issue: http://jsfiddle.net/ruh7z/1/
Any help with this would be great, thanks
That behavior is exactly what floating is supposed to do. If you use table-cell for your display style, that may give you more of what you're expecting. Note that you'll have to use padding instead of margins if you use table-cell.
.container div
{
display: table-cell;
padding-left: 5px;
}
Here's a sample of this in use.
put the div's in a "fixed width" container div and prevent overflow. then have buttons or whatever at each end of the container div to "slide" the child divs left or right.
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
Edit: I cannot modify the HTML page at all or else I will automatically get a 0.
My professor just gave us this assignment where we add CSS to an HTML page. We have to follow screenshots, using the right margin, padding, borders, widths, and heights.
For multiple columns, he wants us to use float, which is all fine and dandy, but 3 columns need to be floated to the left and then centered in the page.
So while the screenshot looks like this:
My actual project looks like this:
How am I supposed to float these columns, and keep them centered?
I have set text-align for section#featured, but that only centered the text, not the elements. I can't use the display property, or I'll get points taken off. In the other screenshots he does not specify any margin or padding for the columns, so they are what they are.
They are div elements floated to the left, by the way, so their default display is block. Setting an auto margin does nothing.
Any ideas? Should I just stick it to him and use display instead of float? Because that actually works.
Look at the diagram.
Create a container to represent the dark blue/purple outline. Give it a size. Centre it.
Arrange the three side-by-side elements inside that container.
You can place your elements in a div and center it using css like
#my_div {
display: table;
margin: 0 auto;
}
I'm a bit afraid of using floats as I didn't yet understand clearing the floats and all the hacks that are on the internet in regard to that activity so I've used display:inline-block to place two divs in inline fashion. Their container has a
width:auto;
max-width:900px;
and each of the divs has
display:inline-block;
width: 450px;
Now no matter what I do the second div always breaks to another line right below the first div.
Here's the code : http://codepen.io/anon/pen/xgtFd
I have already modified the width of the two divs like for example
width:440px;
but it didn't help. Still the second div is slightly 'off place'. That's weird cause I was making a website and using pretty much the same approach for my header like in this project. Please help me determine the problem.
I would be glad for any help.
The widths are too wide.
Bump the nav down to about 446px, and they come back in line.
Why 444px instead of 450px? Two reasons:
Your border is taking 2px.
There is whitespace between the <div> tags in your markup, which is reflected in the rendering. If you would like it to be able to make it 450px, put the closing div tag and the next opening div tag immediately adjacent, like so: </div><div id="nav">
If you want to be able to keep the border, and set the width to 450px, then you should check out box-sizing, and utilize box-sizing: border-box;.
Edit:
To address your vertical alignment issues, you need to apply vertical-align: top; to the div elements (the nav and logo divs).
And, the ul isn't centered because when you apply display:block to it, it fills the full width. So you could either make the contents of the div centered with text-align: center on the ul, or you could make the ul display: inline-block.
How to make a div to float vertically? If there is empty space above a div then it should go up and fill up the space leaving the empty space at the bottom.
float:left // for floating horizontally
I have many div which are floating horizontally with a fixed width but not a fixed height. I want them to be arranged without leaving the empty space.
How can this be done?
A div would never leave empty space above itself. It will fill the space and then the document would go on to the bottom.
I guess, there is some sort of padding or margin there.
You can try to give the divs an absolute position as:
div {
position: absolute;
top: 0;
}
This way, div will be placed almost to the top of the page! Overlapping other elements, You can give some value to top in such a way that you're giving margin-top.
I hope it helps.
Let me assume you're experiencing the following problem: you have some divs with different heights one after another in several rows. Say, there's a very tall in the first row, forcing all the divs of the second row to "dive" deeper. I have a strong feeling, that there's no cross-browser pure-css way to improve this look much at the moment. However, you can achieve at least something with
display:inline-block;
vertical-align:top
instead of
float:left.
It will look like this:
http://jsfiddle.net/wHTQ2/
if you need something better looking, please, see this question:
css float elements with unequal heights left and up in grid
I believe it's the same thing that you're looking for. Unfortunately, there's not much you can do with pure css
Please see this pen for an example of my problem http://codepen.io/MarkRBM/pen/EmlJC
I cant get the 3 divs that say book now, subscribe, contact to display inline with the div with with the header and paragraph. I have been trying for a while and looking at learn layout.com. This is part of a larger project and I have tried to float it but it messes up the styling of everything else if I do that so I figured there must a way with inline block
edit I have updated the pen with the full scss file the css in question is on lines 866-894. There may be too much going wrong for you to figure it out and if so thats not a problem I will keep plugging away at it.
Yes, it's certainly possible, and you're on the right track. Just a few errors in the css:
First, .locinfo is inline-block, but it's inside .loc, which is not (so it's block by default) — so set .loc to inline-block as well.
You're also missing a semicolon after inline-block in the definition of .locbook, which is causing that rule to be ignored.
Without knowing exactly what you want the result to look like, I'm not sure if there's more that needs fixing. But those changes seem to get at least most of the way there.
Edit: more detail in response to comment:
.locinfo is alone by itself in its container, so set its width to 100% instead of 49%. The key is that this is the element's width as a percentage of its container. Its container (a .loc) has 49% of the page, so if you give .locinfo 49% of that, it will only have 24% of the page.
Similarly, set .locbook to 32%. Those three divs will then lie side-by-side in their container's 49% of the page.
Finally, set vertical-align: top on .loc and margin: 0 on .locbook, and you'll get everything nicely aligned to the top.
you forgot to add semicolon after display:inline-block
.locbook{
/*width: 49%;*/
background-color: #3475b3;
display: inline-block;
vertical-align: top;
}
You might try switching them to spans. Div's are by default {display: block}, while spans are {display: inline}. Block elements cannot be placed on the same line as other elements. Inline elements' width cannot be specified however, in which case you'll want to style either div or span, whichever you choose (it doesn't really matter) to {display: inline-block}