This is the html code.
<div id="sidebar1">
sidebar1
</div>
<div id="sidebar2">
sidebar2
</div>
This is the css code for the html.
div {
width: 100px;
height:100px;
border-style: solid; border-width: 1px 1px 1px 1px;
}
div#sidebar1 {
float: left;
}
The presentation of it looks like below in my latest firefox.
Why was the text 'sidebar2' not hidden by the div1?
The original html looked like below.
In my opinion, due to the float left, the entire div2 will be overlapped by div1 including the text in div2 like below.
the below picture is the moment when I hover to the div2 in firebug. Obviously, the text 'siderbar2' seems depart from the div2. why?
To get the problem, you need to understand that the box is not the content.
From W3C wiki:
Each rendered line is enclosed in a separate line box.
You make #sidebar1 floating, so you put it out of the flow
Now, #sidebar2 box can take its place
But, #sidebar2's content (aka. first line box) is different from #sidebar2 box, and was pushed down by #sidebar1
To avoid this kind of behavior, you can add overflow: hidden on #sidebar2, or better: float: left.
Many people doesn't understand float and don't think it put the element out of the flow. The way we use it usually makes us to think it simply "puts elements next to each other". And when we face an "issue", we solve it without understanding it.
This property's name is float, not arrange.
If you want the two elements to display over each other. Change the positioning of the first one to absolute.
This will take it out of the ordinary flow rendering and allow any elements to overlap with it.
div {
width: 100px;
height:100px;
border-style: solid; border-width: 1px 1px 1px 1px;
position:absolute;
}
div#sidebar1 {
float: left;
}
Related
I want to create a boxed border around some text, specifically numbers. But I want the box to be the same size, no matter if its a single digit number or a triple digit number. I've tried a couple things, but every time the border just wraps the number. The number will be wrap with the <strong> tag.
strong{
border: 1px;
border-style: solid;
font-size:12px;
}
As said in the comments, wrap your text using a div of fixed width and style the div with a border. Here is a live example:
#theDiv {
width: 300px;
border: solid red 2px;
}
<div id="theDiv">
Your Content
</div>
You have to give a fixed width to that element
strong {
display: inline-block;
width: 50px;
border: 1px solid #000;
text-align: center;
}
http://jsfiddle.net/Lcpvgykr/
I suggest using <div> tag in this situation (remember that you can place a div inside of div!) as it would look neat and you could do it pretty neatly. However it is also possible to make such a thing with 'padding:x' on CSS style sheet, but I do not suggest this way as it would be less efficient than div.
When you write your divs surrounding those numbers, define a class for all of them. Let's say <div class="numberBoxes"></div> (between would be that number), then go to CSS stylesheet and write .numberBoxes { } inside of curly braces design that border (remember to put width and height of div! It won't show up, if you don't!)
I have a CSS
.nav {
width: 200px;
line-height: 50px;
float: left;
}
.content {
margin: 0px 0px 0px 230px;
}
.container {
border: 1px solid red;
}
And here is the HTML
<body>
<div class="container">
<div class="nav">Some text
<br>more text
<br>even more text
</div>
<div class="content">
<h1>Home</h1>
<p>Text paragraph</p>
</div>
</div>
</body>
This gives me menu on the left and the content on the right. And a red box around the content on the right, but only the half menu on the left.
But I would like to have the red box also around the complete nav-div Can anyone help?
Thanks
Teddy
Add overflow:auto to your container div's CSS:
.container {
border: 1px solid red;
overflow:auto;
}
jsFiddle example
Floating the child div removes it from the flow of the document and the container essentially collapses as if it didn't exist. Adding the overflow restores the behavior you're after.
I think this is a quick fix if you float your container it should solve the problem your having. See here http://jsfiddle.net/1540sscj/
.container {
border: 1px solid red;
float:left;
width:100%;
}
Floating an element removes it from the normal flow of the page with one side effect being that its parent's dimensions won't expand to fit it.
So, what you need to do is clear the floated item. The best way to do this, without using additional markup or using the overflow property, which may cause other issues, depending on your layout, is to use the :after pseudo class on the parent element, like so:
.nav{
width:200px;
line-height:50px;
float:left;
}
.content{
margin:0px 0px 0px 230px;
}
.container{
border:1px solid red;
}
.container::after{
clear:both;
content:"";
display:block;
height:0;
width:0;
}
<body>
<div class="container">
<div class="nav">Xalsdk fjaskldfj alskdfj asädf<br>asdf<br>asdf</div>
<div class="content">
<h1>Home</h1>
<p>Bla bla.</p>
</div>
</div>
</body>
More information on clear
More information on pseudo elements
Best way imho would be to add a div like:
<div style="clear:both;"></div>
Under your floating elements: FIDDLE
This way you don't need to use oveflow:hidden on your container that may give you problems once you have more stuff in your project.
Also you shoudn't use a margin-left for your content as the previous element is already floating left. The best practise if you want to add some margin between nav and content would be to make your content float left as well and then use margin left (the exact size you want) with respect of the nav and not with the left of the window.
Finally, if you don't want to add the clear:both div to the html you could add somethign like
.content:after {
content:'';
display:block;
clear: both;
}
it's a bit less browser (old ones) compatible but cleaner
You have to add overflow:auto to .container in your css
Check my js fiddle
Also the css that modified.
.container {
border: 1px solid red;
overflow:auto;
}
Description of property overflow from MDN
The overflow property specifies whether to clip content, render
scrollbars or just display content when it overflows its block level
container.
I have used float: right; to float a whole paragraph to the right - I am highlighting bits of text with a background & border. My problem is that the text below then moves up and wraps to the left of the object (paragraph) that I've floated right. position: absoloute; right:0px; doesn't work as it overlaps.
So my question is, how do I float it right, but ensure the text below stays below?
CSS:
.fcsi {
background: #1E73BE;
padding:20px;
color: white;
border: 2px solid #1E73BE;
border-radius: 25px;
float: right;
}
I've just used a simple div class in HTML around the text.
<div class="fcsi">
TEXT
</div>
Any help much appreciated on this.
After this, I am looking at including an image inside the background & border, aligned top-right or bottom-right. I think I cannot do this with CSS though and need to re-enter the image with HTML each time?
Below the floated paragraph you could add:
<div style="clear:both;height:1px"></div>
Div with id "message-box" is going outside its parent div "message-container"
I dont understand why?
I used "overflow:auto;" in my css for "message-box". but still its not giving me the desired result. margin left is not working properly when i use "overflow:auto" on "message-box".
Below is my HTML file:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" >
<title>temp</title>
</head>
<body>
<div id="main">
<div id="header">header</div>
<div id="container">
<div id="user-container">user</div>
<div id="message-container">
<div id="message-box">message box</div>
<div id="text-box"> text box</div>
</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
Below is my CSS file:
#main{
border: 1px solid red;
margin: 5px;
}
#header{
border: 1px solid red;
height:30px;
margin: 10px;
}
#container{
margin:10px;
height:32em;
}
#footer{
border: 1px solid red;
height:30px;
margin: 10px;
}
#user-container{
border: 1px solid red;
float:left;
width:120px;
height:32em;
}
#message-container{
border: 1px solid red;
height:32em;
width:100%;
}
#message-box{
border: 1px solid grey;
overflow:auto;
margin:5px;
}
#text-box{
border:1px solid grey;
overflow:auto;
margin:5px;
}
please someone help me out here.
Quick answer
Your #message-box has correct margins all around in relation to the #message-container div, but the problem is that both #message-container and #message-box are overflowing into #user-container. Since #message-box has the overflow property, it is clipped at the exact edge where it overflows into #user-container. Since #message-container does not have overflow, it continues to flow behind the #user-container to the edge of the #container div. To fix this, add overflow to the #message-container.
#message-container {
height: 32em;
border: 1px solid red;
overflow: hidden;
}
I think what you want here is overflow: hidden to clip the overflowing content; overflow: auto adds scroll bars to see the overflowing content.
Explanation
The float on #user-container is causing the problem. Floats remove an element from the normal document 'flow' (see Normal Document Flow below).
I added background colors to #user-container(green) and #message-container(blue) so you can see what's happening. If you remove overflow from #text-box and #message-box, you'll see margins are actually working correctly between #message-box and #message-container. Add them back and you'll see how they get clipped by #user-container.
This is what's happening http://jsfiddle.net/fmceqbdp/2/
Normal Document Flow
The DOM has an element hierarchy. The document is the highest level parent (or outermost box), and any element you add is its child. The element's starting position is the upperleft of its parent. If you add another element at the same level (not nested), it is another child of the document and a sibling of the first element. The sibling also wants to be positioned as close as it can to the upperleft of the document, but it gets pushed right by the first element (inline) or to the next line (block). When you nest an element inside that element, the nested element is the child, it is contained inside the parent. It's starting position is the upperleft of its parent element. This is normal document flow. A floated element is removed from this normal flow, so it doesn't push other elements the way it normally would.
How Floats Behave
Divs are block elements, they push other elements away. However, when you float an element, it removes that element from the normal document flow -- that means its position is invisible to sibling elements (elements at the same level), so they're now positioned in front or behind the floated element as though the floated element doesn't exist. Because you floated #user-container, #message-container fills the entire #container as though #user-container is not there.
How Overflow Works
The element that has the overflow property will self-clear from overflowing into other elements. This is why #message-container flowed into the space occupied by #user-container but its children #message-box and #text-box with the overflow property had cleared themselves from flowing into the space #user-container. Their margins were still relative to their parent #message-container, not where they're clipped, which is why it appeared there was no left margin where they ran into #user-container.
For more details, see http://css-tricks.com/the-css-overflow-property/ -- scroll about 1/4 of the way down the page.
You need to add an overflow to #message-container because that's the div that's being pushed by the float not its children. #message-box and #text-box don't interact with their parents previous siblings.
So, remove all overflow: auto; and do this:
#message-container {
height: 32em;
border: 1px solid red;
overflow: hidden;
}
Here is a Fiddle:
http://jsfiddle.net/Ljqmjzkp/1/
PS: Cleaned the code so it's easier to read, also I indented it according to your DOM so you can see the structure. Keep that in mind, it helps ^^
I am trying to float multiple divs (2 pictured, another will be added later). The problem is that the site container seems to ignore them when set to auto. I am not sure if this is something wrong with the container css, or the css used to with the divs. How would I go about getting the site container to recognize the floats? Thanks in advance.
Relevant HTML:
<div id="storehours">
<div id="hoursheader"><p>Shop Hours</p></div>
</div>
Relevant CSS:
#storehours {
border: 1px solid black;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
margin-left: 11px;
margin-bottom: 15px;
width: 250px;
height: auto;
float: left;
}
(That code is for the div on the right, the left one is the same but contains the form, which I don't think is the problem.)
Edit: Updated with clears and fixed cap letter. Still having the same problem.
Edit2: For clarification. The html is within the container that also contains the google maps. As you cans see, the floats cause the container to ignore them and they start at the bottom of the container. I could potentially fix the problem by setting a height on the container instead of leaving it auto, but is that good practice?
You should add overflow:hidden; on the style of the container <div id="storehours">
.
It is because you are not clearing your floats use this
<div style="clear: both;"></div>