I have created a site which has little buttons for login and logout at the top right corner.
Inside a "header_content" div I have got another div with "float: right" (to keep it at top right corner) and inside that div I have li with link and a form with button. One has float: right and another float: left (to keep them in line).
Usually everything works fine, but for some strange reason sometimes the floats crashes and the second link "falls" through. After refreshing page everything goes to normal, untill again the crash occurs (it is not really that frequent, but still annoying though)
So is this browser based problem (I am using Chrome), or is it because I have to many "nested" floats or something else?
EDIT:
I guess I have little more floats that I thought :D
Here is the code, hope you'll get the picture ... (the one who keeps falling down is the form with button and id=right)
<div id="header">
<div id="header_banner">
.... smt
</div>
<div id="header_content">
<div id="outer_left">
..... smt
</div>
<div id="outer_right">
<li>
<a id="left" href="........."></a>
<form id="right" method="post" action="">
<div>
......
<button type="submit" value="value"></button>
</div>
</form>
</li>
</div>
</div>
</div>
#header_banner, #outer_left, #left {
float: left;
.....
}
#outer_right, #outer_right li, #right {
float: right;
.....
}
With out an example, I suggest you float left the two links that you are trying to "keep in line". Make sure their widths combined with padding and margines do not exceed the wrapping element's width.
Your floats are arguing with eachother. If you want the elements to be "in line" you could do something with "display: inline-block"
div.right
{
white-space: nowrap;
}
div.right ul li
{
display: inline-block;
}
Well, if the display changes for reload to reload, is there the possibility that the content changes? Even a invisible space character or a border can take up too much space so that the container is too small to float them in line.
Have you tried to enlargen the container by say 50px and test if the behaviour continues?
Related
I still have problem to well understand how the float property works in CSS. I do apologize because I know this is css basics but I really want to understand that and get a good explanation. I've created an example to show you.
Here is my page :
I just want to resize the second div at the right. When I look at it in the Chrome Developer Tools, I see that this div begins at the top left of the window and not after the red square. I'd like it to begins just after the red square to change the width properly without calculating the size of the square and doing something like
width = square size + width i want
Do you know how this it happens and how to properly resize the width of the second div ?
EDIT: the solution consists in add the float property to the second div too. The explanation is the following : floated elements are removed from the flow, so they don't stack with the non-floated elements.
You need to set float for another div too.
We generally do like below:
html
<div class="float-left">
<p>floated left</p>
</div>
<div class="float-left"><!--- to float next to previous div--->
<p>floated left</p>
</div>
css
.float-left{
float: left;
}
As per your comment:
We do clear the float values because the container contents would never been collapsed.
You need to float the second div.
Heres an example.
<div class="parent-div">
<div class="left">
</div>
<div class="left">
<p>This is the description of the image</p>
</div>
</div>
You need to set
p { display:inline; }
or
div { display:inline; }
since paragraphs and divs are block elements.
http://www.w3.org/TR/CSS2/visuren.html#block-boxes
the reason is that floated elements are removed from the flow, so they don't stack with the non-floated elements. - therefore they don't "take up space" like before. This is why your text div starts at the top left of its container.
from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/float
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it. A floating element is one where the computed value of float is not none.
You have to set float for both DIVs
Here is the updated code:
HTML:
<div id="main_container">
<div class="left"></div>
<div class="right">
<p>This is the description of the image <i>Random text</i>
</p>
</div>
<!--Comment below <DIV> to see the result-->
<div class="clear"></div>
</div>
CSS
#main_container {
border:5px solid #000;
}
.left, .right {
width: 100px;
height: 100px;
background: red;
float:left;
}
.right {
background: blue;
width: calc(100% - 100px);
}
.clear {
clear:both;
margin:0;
padding:0;
}
Also, just to add one more important fact related to "float" is, make sure you add "clear:both" property after "float".
Why?? Because, a common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way.
Here is the Fiddle for the same: http://jsfiddle.net/1867ud9p/7/
Hope this will help!
I'm in the process of taking out tables from an entire site, and switching them to CSS Div's.
Here's the link of the first one I'm trying:
http://www.torelloengineers.com/legal_investigations.html
The problem is the content to the right is being put below the picture to the left, rather than being right next to it.
I created this in my CSS file: a container, row, and left, right, and middle for the table cells. I couldn't paste it exactly here because the text box wasn't allowing formatted code.
<div id="row">
<div id="left">
<h4><img src="picts/torello-safety-design.jpg" width="400" height="301"></h4>
</div>
<div id="right">
<h4>Lacking Good Safety Design - Missing Guardrail. Plainville, CT</h4>
<p>While returning to her parked vehicle after using an ATM.... </p>
</div>
</div>
I "dived" the content I wanted as left and right on the main page to where I wanted it, but the right content won't line up with the left.
I didn't see a CSS file that had the IDs #left and #right in it. Are the ids #left and #right floated left and/or right?
#left {
float: left;
}
#right {
float: right;
}
You might want to change those to classes too, just to make it easier to reuse them. :)
Try position:absolute or position:relative
<div id="right"> is formatted as a table cell. Check the vertical alignment for the text - vertical-align:baseline. Personally I would remove the table cell formatting and use a regular div.
Do this:
#left {width: 50%; display: inline-block; vertical-align: top;}
#right {width: 50%; display: inline-block; vertical-align: top;}
Adjust widths to your liking. Floats allow content to wrap around them, so they're an option as well.
While you're in there, change
"Here's a few examples of past work we have done for attorney's:"
to
"Here're a few examples of past work we have done for attorneys:"
Consider the following: (Live Demo)
HTML:
<div contenteditable></div>
CSS:
div {
text-align: right;
}
When you click the div in Firefox, the cursor is located at the left (looks like text-align: right; has no effect). But, if you start typing, text-align: right; starts taking effect.
Why is that? Any ideas how to fix this?
This can be achieved using a simple change like this:
<div contenteditable> </div>
We're forcing a blank space in it.
Well if the space matters, I think you have a problem. But I hope this helps :)
I have 2 divs side by side.
In the first div, I have 2 labels side by side, and one input text below them. One of the labels is an error information. Sometimes it will be displayed, sometimes not. When it's not display, I'd like the div to resize to be smaller, so the second div can be closer to it.
The second thing is the same thing, except it has one label div, therefore it doesn't requires a resize.
Is there a way to achieve what I want? There is an awesomely drawn example of what I want to acahieve below:
This is the code.
<div id="main-div">
<div id="address-number-div">
<label>Number</label>
<label class="error" id="number-error">Empty Field</label>
<input id="number-input" onfocus="onfocus('number-error')"/>
</div>
<div id="address-complement-div">
<label>Complement</label>
<input id="complement-input" />
</div>
and CSS:
div {border: 1px solid #000000; padding: 5px;}
.error{color:#FF0000; margin-left:5px;}
#main-div div {display:inline-block;}
#main-div input {display:block;}
#number-input {
width: 16%;
}
Have a look at this DEMO.
Floating your divs left should solve this problem.
Set them to display: inline-block; to let them shrink to fit the the content.
Don't give width <persentage> type value, give <length>:
#number-input { width: 24px; }
See it with your code on my fiddle.
I'm still learning CSS, so please pardon me if this is something that is easily solved or taught in a class or book.
Here's what I see:
The two gray boxes are placeholders for image files further up the page. Those live in a different div that closes out before reaching the footer div. The source for the footer is:
<div id="footer">
<div class="column">
Column 1<br>
link <br/>
link <br/>
link <br/>
link <br/>
link <br/>
link
<br><br>
link <br/>
link <br/>
link <br/>
link <br/>
link <br/>
</div>
<div class="column">
Column 2<br>
link <br/>
link <br/>
link <br/>
link <br/>
link
<br><br>
link <br/>
link <br/>
</div>
</div>
Here is the CSS for the footer:
#footer {
clear: both;
min-height: 100px;
background-color: #B0C4D1;
padding-left: 8%;
}
.column {
width: 200px;
float: left;
}
So if I make min-height long enough, then the blue covers all of the links in the footer, which is good. But I'd like to understand why I would need to do that. Why don't the columns in the footer div qualify as content so that the background gets filled up? If someone would link me to the relevant terms/tutorials explaining this, I'd really appreciate it. I'm having trouble coming up with the right words to find my answer.
add: overflow: hidden; to #footer
this will make the footer become a new block formatting context so it will contain its floated child columns
added relevant deatils from above link
Floats, absolutely positioned
elements, block containers (such as
inline-blocks, table-cells, and
table-captions) that are not block
boxes, and block boxes with 'overflow' other than 'visible' (except when that
value has been propagated to the
viewport) establish new block
formatting contexts for their
contents.
...
In a block formatting context, each
box's left outer edge touches the left
edge of the containing block (for
right-to-left formatting, right edges
touch). This is true even in the presence of floats ....
in short as long as element only contains floated children, it will not know it's got content unless you tell it, more commonly known as "clearing floats" there are other solutions available too
Floated elements collapse. Add overflow: hidden to your #footer. Example with your code here: http://jsfiddle.net/jackrugile/5HcG9/
You should read up on clearing floats.
http://www.quirksmode.org/css/clearing.html
In order to get your div #footer to grow automatically, it should float just like the divs it contains. The other option would be to add another div that does not float and has clear: both set.
#footer {
clear: both;
min-height: 100px;
background-color: #B0C4D1;
padding-left: 8%;
float: left;
width: 92%; /* Together with padding-left it's exactly 100% */
}