I have a page with 4 <div>'s that have float: left applied to them inside of a container element. The container has background: #ffffff applied to it, but it is not working as I would expect in IE (8, specifically). It works fine in Chrome and FireFox.
I know that if I remove my slider from the container, everything displays as I would expect it. So it has something to do with that, I'm just not sure what it is.
Here is how it should look:
Here is how it is displaying in IE:
CSS:
/* Container */
.main-content {
margin-bottom: 15px;
background: #ffffff;
border: 1px solid #e1e1e1;
}
/* Columns (Wrecked Vehicles, Welcome, Inv Search) */
.col {
float: left;
width: 289px;
padding: 10px;
margin: 5px;
}
/* Slider */
.slider {
float: left;
padding: 10px;
margin: 5px;
}
HTML:
<div class="main-content">
<div class="col n1">
...
</div>
<div class="slider">
...
</div>
<div class="col n2">
...
</div>
<div class="col n3">
...
</div>
<div class="clear"></div>
</div>
Try adding overflow:hidden to the .main_content. The reason the backgorund isn't showing is because, due to all the children floating, the container has zero "real" height.
Related
I have four elements in a div. Out of them, I want the last element to be pushed to the extreme right. I am using float: right for the last element. This results in the last element to be pushed to the right end of the next line in Firefox. For other browsers, rendering is absolutely fine. I cannot make any modification in the HTML.
How can this be fixed?
IF you Share your Code ,I can Help you Better.But I have a few suggestions:
1)Use of width Property to all Elements.(Width's Element1 + Width's Element2 + Width's Element3 + Width's Element4 <= 100%)
2)Use of box-sizing:border-box Property to all Elements.
3)Use of float:left' For the first three elements and float:right` for last Element.
This is example :
.el1, .el2, .el3, .el4 {
width: 20%;
box-sizing: border-box;
border: 1px solid orange;
background-color: #000;
color: orange;
float: left;
}
.el4 {
float: right;
}
<div class="wrapper">
<div class="el1">Element1</div>
<div class="el2">Element2</div>
<div class="el3">Element3</div>
<div class="el4">Element4</div>
</div>
This Work For Me well,I Hope Work For You!
Check this fiddle here. This works fine in Firefox. Maybe you can adjust the CSS.
.container {
width: 100%;
height: 60px;
background-color: green;
}
.el {
width: 50px;
height: 50px;
background-color: red;
display: inline-block;
border: thin solid black;
}
.element4 {
float: right;
}
<div class="container">
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el element4"></div>
</div>
This is a bug in Firefox itself.
https://bugzilla.mozilla.org/show_bug.cgi?id=488725
I have fixed it using firefox specific styles:
#-moz-document url-prefix() {
//your styles here
}
Okay, I'm very new to CSS and only minimally familiar with HTML so I'm still kind of fumbling around with both of them. I'm building a practice site and I can't figure out what I'm doing wrong here. My goal is to have the image box to the left of the header and paragraph, but have the title on the same line as the top of the image. Here's what I have:
<img src="" />
<div class="bios">
<h4>First Last</h4>
<p>This is my bio</p>
</div>
Paired with this CSS:
.bios {
height: 100px;
width: auto;
display: inline;
background-color: #a78ffc;
clear: left;
display: inline;
/** top, right, bottom, left **/
margin: 1px 1px 1px 10px;
/** top, right, bottom, left **/
padding: 1px 1px 1px 10px
}
img {
height: 100px;
width: 100px;
float: left;
clear: left;
display: inline;
}
I added the background color to really see what's going on in the preview and I'm more confused than ever. This is how it's displaying:
http://i1126.photobucket.com/albums/l618/spenciecakes/Screen%20Shot%202016-05-13%20at%2010.41.45%20AM_zps50dajzko.png
EDIT
Okay, I've added the additional code as requested and I've added the display: inline to both elements but honestly it all appears the same..
I can't solve your problem with only the code you provided (what's the code for the images?), but I can tell you what's wrong with the current code. First, in order for the width and height property to work, the display property needs to be set to either inline-block or block.
Secondly, the float property does not have a value center. It can only take the values left and right (you need to the first one in this case).
The negative margin trick works like a charm (Explanation in code comments)
.bio {
overflow: hidden; /* Prevent negative margin from leaking out */
}
.bio-inner {
overflow: hidden; /* Clearfix */
margin-left: -1em; /* A) Remove spacing between items when they are against the left side (Must be negative B) */
}
.bio-thumbnail {
height: 3em;
width: auto;
background-color: #a78ffc;
}
.bio-thumbnail,
.bio-info {
float: left;
margin-left: 1em; /* B) Add spacing between items (Must be positive A) */
}
.bio-info-heading {
margin: 0em; /* Just removing default margins */
}
.bio-info-text {
margin-top: 0.5em;
}
<div class="bio">
<div class="bio-inner">
<img class="bio-thumbnail" src="http://i.stack.imgur.com/7bI1Y.jpg">
<div class="bio-info">
<h4 class="bio-info-heading">First Last</h4>
<p class="bio-info-text">This is my bio</p>
</div>
</div>
</div>
This, I have found, works best in cases where screens may be too small to fit the image and text side-by-side.
You can use display: inline-block.
.inline {
display: inline-block;
}
.title {
font-weight: bold;
}
<div>
<div class="inline">
<img src="http://placehold.it/50x50" />
</div>
<div class="inline">
<div class="title">Item 1</div>
<p>Item 1 description</p>
</div>
</div>
<div>
<div class="inline">
<img src="http://placehold.it/50x50" />
</div>
<div class="inline">
<div class="title">Item 2</div>
<p>Item 2 description</p>
</div>
</div>
I was struggling with weird rendering of my web site header for hour or so and it looks like there is the bug in WebKit (e.g. latest Chrome). It is bug? Or am I missing something?
Here is the http://jsfiddle.net/y415st6s/
I expect a separator to appear between Site Title and Page Title, but get only its border overflowing over the site title. I'm using min-width to set width of block with "Site title" and I noticed it works fine at least in FireFox and IE. In WebKit it looks like inner padding is not accounted in external dimensions of the block with min-width. The problem seems to disappear when 'width' is also set to the same value (see line #28 in jsfiddle CSS).
According to https://developer.mozilla.org/en-US/docs/Web/CSS/min-width setting just min-width should override 'width' too, so it seems I'm doing it the right way.
Staff for copy/pasting ...
HTML
<header class="siteHeader hstackpanel">
<div>
<div class="siteHeader__logoArea hstackpanel">
<div class="siteHeader__logoIcon">
<img src="http://static.flaticon.com/png/16/1394.png">
</div>
<div class="siteHeader__logoText hstackpanel-autofit">Site Title</div>
<div class="siteHeader__logoButtons">
<img src="http://static.flaticon.com/png/16/9916.png">
<img src="http://static.flaticon.com/png/16/57164.png">
</div>
</div>
</div>
<div>
<!-- box with blue border -->
<div class="siteHeader__splitter"></div>
</div>
<div class="hstackpanel-autofit">
<div class="siteHeader__titleArea hstackpanel">
<div class="hstackpanel-autofit">
<div class="siteHeader__titleAreaText hstackpanel hstackpanel-autofit">
<span class="siteHeader__pageTitleText">Current Page Title</span>
</div>
</div>
<div>
<div class="siteHeader__titleAreaButtons hstackpanel"></div>
</div>
</div>
</div>
</header>
CSS
* {
box-sizing: border-box;
}
.hstackpanel {
display: table;
width: 100%;
}
.hstackpanel > div {
display: table-cell;
position: relative;
vertical-align: middle;
padding: 2px;
}
.hstackpanel > div:not(.hstackpanel-autofit) {
white-space: nowrap;
width: 0.01px;
}
img {
width: 16px;
height: 16px;
}
.siteHeader {
background: yellow;
n_height: 24px;
}
.siteHeader__logoArea {
min-width: 270px;
/* width: 270px; */
padding: 4px 8px;
background: green;
}
.siteHeader__splitter {
border: 1px solid blue;
width: 8px;
height: 24px;
}
.siteHeader__titleArea {
padding: 4px 8px;
background: green;
}
Chrome and Safari do not support the min-width property on table elements. They will, however, respect min-width when applied to table cells. You're applying display: table to the .htstackpanel div.
I have an element with a 70% width, and it is floating beside another element with 30% width. However, when I add 25px of padding, the element expands and breaks the format.
Is there any way to make padding increase the contents' distance from the element's edge, as opposed to making the element bigger?
.seventy {
float: left;
width: 70%;
background-color: lightsalmon;
}
.thirty {
float: left;
width: 30%;
background-color: lightgreen;
}
.padded {
padding: 25px; /* Forces box onto next line */
}
<div>Works:</div>
<div class="seventy">70% wide</div>
<div class="thirty">30% wide</div>
<br><br>
<div>Broken:</div>
<div class="seventy">70% wide</div>
<div class="thirty padded">30% wide, padded</div>
When you use the border-box model, the padding is included in the box size. See here for details.
.seventy {
float: left;
width: 70%;
background-color: lightsalmon;
}
.thirty {
box-sizing: border-box;
padding: 25px;
float: left;
width: 30%;
background-color: lightgreen;
}
<div class="seventy">70% wide</div>
<div class="thirty">30% wide</div>
I would create another element of the same type (may I guess it's a div?) inside the element and set that one to have a padding/margin of 25px.
For example:
<div id="wrapper">
<div id="width30">
</div>
<div id="width70">
<div id="padding25">
Acctual content here.
</div>
</div>
</div>
</div>
I'm reworking a layout currently using tables for a two-column design, and ran into some problems.
<div id="frame">
<div id="leftcol">
<div id="1">blah</div>
</div>
<div id="leftcol">
<div id="2">blah</div>
<div id="3">blah</div>
</div>
</div>
#leftCol
{
margin-right: 10px;
width: 49%;
float: left;
}
#rightCol
{
width: 49%;
float: left;
}
Originally I had a two-columned table with width=100% - this worked perfectly in Firefox, but in IE the table overflowed the #frame div container. I removed this table and added two floated divs, but I still have issues getting the columns to be equal.
All of my content resides inside the div #frame, which has height constraints as well as padding and a margin (I use this to leave a "gutter" around the edge of the page).
I need the two floated DIV columns to be the same width, and sit next to each other with a 10px (ish) gutter in between. I tried making both width: 50%, but this fails because the container they are in (#frame) is smaller width-wise then the whole body of the page. (If I get rid of the gutter padding, it works in FF but still not in IE.
Making each column width: 49% works, but looks ugly as the size changes between browsers and the right column does not line up with the edge of the #frame container.
I tried doing this before but ultimately went back to tables 9since it seemed to be working), but now that I see it's incompatible with IE I've been working for hours to find a cross-browser css solution. Any ideas?
Setting each column to 50% should work, if you make sure they don't have any margins or paddings.
If they need padding, put in an extra wrapper div, that can have as much padding/margins as neccesary.
For the gutter in between, you could give these wrapper divs a border on left/right side to make it look like a space in between the columns.
Posting a full code example (on jsbin.com for example) would also help us understand your problem more easily. :)
I think you might benefit from a css framework like 960gs or blueprint css it allows absolute grid placement and is cross browser compatible out of the box.
http://www.blueprintcss.org/
http://960.gs/
If you know the width of the frame, you can do this
#frame {
background-color: green;
width: 500px;
overflow: auto;
}
#leftCol
{
width: 245px;
float: left;
background-color: red;
}
#rightCol
{
width: 245px;
float: right;
background-color: blue;
}
<div id="frame">
<div id="leftCol">
<div id="1">blah</div>
</div>
<div id="rightCol">
<div id="2">blah</div>
<div id="3">blah</div>
</div>
</div>
Otherwise, an add an extra div, and do this
<div id="frame">
<div id="leftCol">
<div id="hack">
<div id="1">blah</div>
</div>
</div>
<div id="rightCol">
<div id="2">blah</div>
<div id="3">blah</div>
</div>
</div>
#frame {
background-color: green;
width: 500px;
overflow: auto;
}
#leftCol
{
width: 50%;
float: left;
}
#hack {
margin-right: 10px;
background-color: red;
}
#rightCol
{
width: 50%;
float: right;
background-color: blue;
}
Ok here you go. This is how it can be achieved.
CSS
#leftCol, #rightCol{
width: 48%;
float: left;
background: red;
box-sizing: border-box;
}
#leftCol{
margin-right: 1%;
}
#rightCol{
margin-left: 1%;
}
HTML
<div id="frame">
<div id="leftcol">
<div id="1">blah</div>
</div>
<div id="rightCol">
<div id="2">blah</div>
<div id="3">blah</div>
</div>
</div>
If you need here is the vendor prefix for box-sizing.
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
Note that you have typo in your HTML wher both div are called #leftCol. There is no#rightCol.