I'm making website for the first time and it's very hard for me on some simple tasks. Like right now I'm stuck at this problem. I have one div which floats left and another one which floats right. At some pages div at the left is bigger than div at the right, sometimes it's opposite.
I need one more div which stays at the bottom center no matter which (left or right) div is bigger. Right now I managed to do it work only if div at the left is bigger than div at the right.
Sorry it's confusing and hard to explain, the problem is probably positioning, but I can't figure out myself how to make it work.
In short: Need ID bottom to be at the bottom center, below other divs.
Forgot to mention: If I move divs, it messes up on different screen sizes.
<div id="bottom"><p>How to Make this text to be at the bottom center all the time?</p></div>
Example is here (check ID bottom): http://jsfiddle.net/ZMLyz/61/
#bottom
{
position:absolute;
width:100px;
margin-left:-50px;
bottom:20px;
left:50%;
}
well, the problem is not in css, but rather in the HTML.
You've placed the div id="bottom" within the "div style="float:left;" element. That is why the bottom bar appears to be flying in between. But in reality, it is exactly where you placed it, with the css doing exactly what it's supposed to.
Solution:
In your updated fiddle, please note lines 89 and 90 in HTML.
1. Line 89 is being used to clear float property for upcoming elements.
2. Line 90 is the bototm div.
As for the css, strting from line 15, I've made some changes but it's all the same before that line.
Give it a set width and set the margin to auto. This will center the div in its parent container. You also need to clear both left and right divs since your dealing with floats.
#bottom{
width:800px; /*make the width whatever you want*/
margin:auto;
clear:both;
}
Good Luck
Give style margin-top: Xpx
Here's the example: http://jsfiddle.net/ZMLyz/62/
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 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
I am attempting to build a responsive design from the ground up and using jsfiddle to do some testing. I have two outer columns with fixed widths and a central column that takes up the remaining width in between. I cannot for the life of me get the outer columns to expand to fill the height of the wrapper they are in. I think this may have something to do with how I got the middle div to take the central space (putting it after the right div in the order and then adding overflow:hidden).
I have tried clearing the floats with a div with clear:both on it and have also tried adding overflow:hidden to the wrapper.
The jsfiddle link is : http://jsfiddle.net/jleslie/ErAWn/1/
Any help would be much appreciated!
Don't use floats. You can keep it responsive with left and right absolute positions:
http://jsfiddle.net/ErAWn/4/
Applying this style to the side column works in Safari, Chrome and FF even though does not seem to work in jsfiddle, plus floating is preserved if you need it:
.side_col {
width: 200px;
background-color: red;
height: 100%;
}
I have a HTML sample here: http://jsfiddle.net/TzJmN/1/
I'm trying to get the output to appear so the item on the left and the "Tracking error" header on the left and the text on the right are vertically aligned, and have both 12px under the horizontal bar at the top. I'm unable to get this right though. The item on the left insists on staying packed into the top left corner, and the item on the right insists on staying too far from the horizontal bar!
I have a strong feeling it's because I'm using floats, but I don't know how to resolve this.
Any suggestions?
What about using position:absolute; top:12px; bottom:0; left:0; width:100px and giving the text div a margin that matches the width + the margin you want in between them margin-left:110px;. This way also scales nicely when you resize the browser.
Have a look here: http://jsfiddle.net/TzJmN/3/
Try resizing your browser window.
EDIT: made some minor change to have the 12px distance from the top border
Add padding-top: 10px; to .risk-statistic-container
Edit:
Sorry, try this:
http://jsfiddle.net/aFb3F/
You floats were being cleared