Two divs are next to eachother, both floating left within a wrapper. In IE and firefox they appear correctly, but in Chrome, the 2nd floating div clears down below Div A. When I remove "float:left" in the css, it goes to the correct position in Chrome, but clears down in IE and firefox (as it should). I dont know why it is appearing this way in Chrome. Any ideas?
The HTML and CSS would be useful to answer this.
If you have just two divs and you want them to float next to one another, then set a width on each of them and float one left and float the other right. Remember to leave some space in between the two.
in my case i use display:inline-table for the parent element of the floated elements.. Even if it is not a table.
I used the display:inline-table in order to fix the bug that google chrome had encountered..
I've same issue in Chrome and I solve it by giving display:inline-table to parent div
The solution is simple - just add the div which contains all these divs an attribute: display: table; - it should solve the problem.
I had multiple css float left divs with text links inside and the container was over lapping on the right of each. The fix was to remove space in the link display text. eg. ...> TEXT </a> to ...>TEXT</a>
You must give 1 div the height
For example
Div 1
.oneColFixCtrHdr #mainContent {
background: #FFFFFF;
width: 375px;
height: 0px; /* deze hoogte op 0 instellen, die bepaal je met de onderstaande div. */
position: relative;
display: block;
float: left;
padding-left: 10px;
margin-bottom: 20px;
padding-bottom: 0px;
padding-top: 20px;
}
Div 2
.oneColFixCtrHdr #maincontent2 {
background: #FFFFFF;
width: 390px;
height: auto;
position: relative;
display: inline-block;
float: right;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 5px;
padding-bottom: 0px;
padding-top: 20px;
padding-left: 20px;
border-left-style: groove;
In Chrome - Seems this issue has something to do with display attribute of parent element. I had same issue and did lot of search. Finally i got it fixed by removing display CSS attribute of parent TD tag. I also obsorved one wiered thing. When i had display:block; for parent a TD table element, in Chrome, colspan was not working (in IE it was working fine). I scratched my lots of hairs finding this problem.
I faced the same problem with Div and its Children Span both had float right, to solve i just added display inline to the Div parent and now it works fine in Chrome and Safari both.
I wrapped everything in <div style="display:inline;"> ... code .. </div> and solved the problem.
Without a code example this really is just guessing
I am not sure how Chrome works but I do know IE ads its own styles. Did you use a css reset? most cross browser issues can be fixed by this.
Sounds like the combined width of the 2 floating divs exceeds the width of the wrapper. Try setting the wrapper width to 100% or no width... or reducing the width of the two floating divs.
do you have any display: inline, block etc style properties set on any of those divs?
What about setting display:inline-block and the width for both divs?
EDIT: Setting a max-width of %50 for each one would work in all browsers except IE6, assuming there's no padding/margin set.
I've faced with the same problem. Chrome incorrectly displays divs with float. The block is displayed under the first. Not aside how I expected.
Solition is simple! Surround both blocks with div that no any other sisterly blocks inside.
I had a problem where I had a container div with a bunch of inner divs that had the float:left property set. My last inner div (most right) also wrapped down.
I fixed my problem by making sure that the combined inner divs with margins does not exceed the width of the container div.
Chrome's developer tool similar to firebug was great in helping me fix the problem.
For my container div I did not explicitly set a width but chrome's developer tool could show me the inherited width. I then looked at all the widths of the inner divs combined and then adjusted some of the inner div's width.
also similar issue with floating child div's. In my case .. I was floating a surrounding div to right, that contained h3 element (with text-align property) - followed by 2 child block elements.
Intent center h3 text, in relation to child block elements below it.
-
Problem? I did not have a set width for block child elements.. Why? I wanted the width to hold distinct padding on left / right relative to text amount in that container. eg. padding:10px 30px;
Solution I resorted to setting a width to surrounding and child divs, also center aligning text on child divs to give similar results of first case attempt.
I experienced the same problem. I had two divs with float: left inside a table td -- I had to set the table td style to include style="text-align: left;" for them to correctly align.
I'm no HTML hero so in my case the problem was really silly.
It was just a syntax error so be sure you check all your syntax before you start pulling your hair out like I did.
And SAFARI was completely ignoring it and displaying the divs correctly floated so I got really confused.
BASICALLY it was an unclosed div tag that was creating the problem :
<div class="seperator" </div> instead of <div class="seperator"> </div>
Related
So basically, I want two divs to sit inside another div. The first one is sitting inside with no issues, but the second one floats underneath the parent. When I add overflow:hidden I can't see the div anymore. The closest I've gotten to a solution was to add overflow:auto, but that just creates a scroll bar. I have tried resizing, different positioning, overflow and clearfix but so far I can't find a solution. Any ideas guys? JSFiddle demo here http://jsfiddle.net/QLbGc/ Thanks for any help, it's been annoying me for a couple of days now.
You forgot to put float:left; at the slideshow div
It should be
#slideshow {
background-color: #000;
margin: 15px;
height: 95%;
width: 60%;
-moz-border-radius: 15px;
border-radius: 15px;
float: left;
}
So now you have the 'slideshow' div floating left and 'about' div floating right and they can fit inside the parent div.
Basically they were inside the parent div from the first time but the about div was under slideshow div.
Demo:
http://jsfiddle.net/QLbGc/2/
If you're looking to have the two divs side by side here's a fiddle for that.
http://jsfiddle.net/Hastig/QLbGc/6/
I stripped out a bunch of stuff as I wasn't sure you needed it or it was just stuff you were throwing at it to try and affect change.
Somebody mentioned you were missing a float: left; in what we assume you wanted as your left div.
Remember to compensate for margin and padding to match the container div.
In my example the main container was 500px wide. If I set each float div to 250px width when added to the 20px combined margins on those divs the total width goes to 520px and pushes that right div under the left div so you'll want each floated div at 240px to compensate. Same deal with percentages.
If I misundestood your intention and you're looking to hide one of those div use display: none; on it and double the width of the one you want to show.
try to put this code in your css.
.content::-webkit-scrollbar {
display: none;
}
I created a DIV which on the right top corner must have two links (Menu and Options):
<div class="Clear">
<ul class="Clear">
<li><a>Menu</a></li>
<li><a>Options</a></li>
</ul>
<h2>Header</h2>
<p>Text</p>
</div>
To align the ul on the right I used "float: right".
The online example is in: http://jsfiddle.net/y2hhm/8/
Each link text will be replace by an icon image using background-image.
It looks fine on the first DIV. But on the second the table is pushed down.
I also tried "position:absolute" but it makes hard to align it on the right.
Does anyone knows how to make the Menu/Options list look the same in both?
EDIT:
Tables have default styles applied to them by the browser. To solve this specific problem on your second fiddle (yellow-orange one), you need to set the table's border-spacing: 0;.
Perhaps you can turn to CSS resets if these pre-set properties annoy you.
-----------------------------
I think you might have overlooked the fact that ul's and ol's have a default styling applied to them, which differs from browser to browser. Some might set padding, others margin (I haven't tested it myself).
All you need to do is add this to your CSS: (tested and working in your fiddle)
ul {
padding: 0;
margin: 0;
}
Your h2 element and table element respond differently to the float of the ul. If you set your h2 CSS to clear:both the margin from the ul will also impact it. The table element for some reason considers the margin of your floated element (I can't explain why).
NB: // are not valid CSS comments. Use /* */.
If you absolutely want the menu to be removed from the flow, set the parent div to position: relative; and the ul to position: absolute; margin-left: 80%; margin-top: 0%;.
The disadvantage of this method is that you have to approximately estimate the menu's length. (in this case I took 80% margin, so estimated at 20%) . Given that your divs have dynamic widths, it will also cause the menu to float outside of the table when the viewport is too small. You can prevent this by setting the div to overflow: hidden;, but overall...
If this were a problem I had to solve, I would simply stick with the float: right; and leave some whitespace between the menu and the next elements...
I'm stumped on a css problem. I've put up a test page here: http://georgecrawford.com/test/ for you to check.
I have a left-floated sidebar div, and a main content div which follows it (and which should wrap around it). If the content is just paragraphs, there's no problem, as the text wraps nicely around the float. However, I have some blockquotes in the content, and I'd like these to have a background-color and/or a border. The text in these is no problem, it wraps nicely around the sidebar of course. However, the blockquote itself spans the entire width of the content div, which means a border around it would run over the top of the sidebar.
How can I ensure that blockquotes in the content div are shortened horizontally to be the same width as the text lines (the 'line boxes') within them? Paragraphs have the same behaviour, but I don't need a border around my paragraphs!
Thanks for any help!
I've stumbled upon a potential fix for this problem.
If I set all blockquotes with the CSS property overflow: auto, it makes them reduce to the desired width when they'd otherwise overlap the floated sidebar. I've updated the demo at http://georgecrawford.com/test/ so you can see the difference. It's perfect in Safari/OS X, but I haven't yet tested in other browsers.
Any comments? Does this solution have any drawbacks? Many thanks again for your help.
In IE 9 the "overflow: auto" corrects blockquote underlay or overlay of a div floating to one side, however the overflow correction does not allow standard blockquote indentations on both blockquote borders.
background-color: #ccdfff;
border: 5px #dfefff solid;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
color: #003366;
line-height: 2em;
letter-spacing: 0.2em;
overflow: auto;
padding: 20px;
This leaves blockquote pushed right to the left edge of a "float: right" div. Blockquote border-right margins are ignored by IE9. Chrome has no problem displaying correct blockquote indentations.
I have tested parent-child adjustments, also display, float, and position selectors but these are not helpful. Anyone know how to correct IE blockquote margin collapse when blockquote is positioned beside a floating div?
The problem is not the blockquote - that just does what it's told, it stretches to 100% of it's parent's width. It's the parent div with the id content that does not have a float property, and thus spans across the floated div.
Can you try putting the sidebar as a child into content, and not as a sibling next to it? I think the blockquote should then adhere to the width rules.
Alternatively, you can always set the blockquote to display: inline, but that may not be what you want, as it then won't stretch to the full width anymore.
I have this CSS and I cannot set the width on a span element. Any ideas what I am doing wrong?
#address-readonly
{
margin-left:150px !important;
padding-left:100px;
}
I am using this in 2 areas in my application. Here is the first area:
<tr>
<th colspan="2">Address Details</th>
<th><span id="address-readonly" class="address-readonly"></span></th>
</tr>
And here is the second area:
<div id="addressHeader" class="addressHeader">
<span>Address Details</span>
<span id="address-readonly" class="address-readonly"></span>
I want the address-readonly span to be more right aligned. The padding/margin combo has almost no effect. What should I be doing here? I don't want to add a bunch of non-breaking spaces, but that's basically the effect I am looking for. This particular client has an office full of IE7 machines, so no FireFox or Safari etc... I have tried setting the width of the span as well.
Try this:
#address-readonly
{
display:block;
float:left;
margin-left: 150px;
width: 100px; /* If you want to set the width */
}
or you could use a div and not set the display attribute.
If applicable, you could try using display: block:
#address-readonly {
display: block;
width: 200px;
}
Without floating, the span will be on it's own row. Hope that helps.
Your only choice is a display value of block or inline-block, because inline elements are resized by their content. Also, please note that inline-block is not that well supported.
Guillaume's and Wicked Flea's answer complement each other, but some points are missing.
Only "box elements" can have its width/height attribute set. Span is a inline element, so it will resize it self to fit content.
So, if you want your elements to have width set, you should use a box element. The problem here is that box elements do not line up in the same row by default. You can then use float and margins to align a box element with another box element.
All that being said, it would be good to use Guillaume's answer. BUT some quirks may appear, check this link link about clearing floats.
What would I do: Use the workaround presented in the link, then use both spans as divs, and have them floated to the left, with your widths and paddings set.
This page I have is super simple, this should be a breeze but I'm stumped.
I have two DIVs, one inside the other. In the first DIV, I have the margins set so that it lays at the top of the page, centered. The second DIV should lay inside the first, centered, but with a 50px margin at top. However, the 50px margin is being applied to the parent DIV and not the child. If I add a border to the parent DIV, it behaves like I expect it to, but not without.
Can anyone offer me any insight to this? Thanks in advance.
<div id="pageWrapper">
<div id="mainWrapper">
<p>foo</p>
</div>
</div>
*{
margin:0px;
padding:0px;
}
body{
background-color:#034375;
}
#pageWrapper{
width:960px;
margin:0px auto 0px auto;
background:url('i/blue-gradient.jpg') top left no-repeat;
}
#mainWrapper{
width:500px;
margin:50px auto 0 auto;
border:1px solid #000000;
background-color:#eeeeee;
}
This issue has to do with the CSS spec on rendering adjacent margins. Essentially, because there's nothing "in between" the margins of the containing div and the margins on the inner div, the larger value is used for both.
You'll see this mainly in Firefox, and although the behavior seems to follow the letter of the law, I'm not sure this particular case behaves as intended by the spec writers.
Fortunately, it's easy to fix -- put something "between" the margins. You've already noticed that putting a border on the parent div works. You can make this border transparent, and reduce the inner margin by 1px, and it will appear functionally the same as your above case. Another option is to apply one pixel of padding-top to the parent div. A third option is to use padding-top: 50px on the parent div instead of applying a top margin to the child div.
More information on collapsing margins.
You don't say which browser you're seeing this in. For me it works as expected in Firefox. However, I suspect you're seeing the issue in Internet Explorer. This is probably because the inner div doesn't have hasLayout applied - this is usually the cause of IE styling bugs. Try adding zoom:1 to the mainWrapper CSS declaration and see if that works.
You probably want to set the padding of mainWrapper instead of margin.
padding:50px 0 0 0;
Check out this description of the box model to see how margins and padding differ.