sorry if the question title is weak, i can't quite sum my problem up into one snappy tagline...
I'm working on a website (using Joomla) and i've had to insert a DIV serving as a sidebar on the right side of the page. in order for it to be displayed "above" (or "over", i mean on the z-axis) the regular page content, i'm using a negative margin on the left side of it, covering the whole width of it, so it will simply float to the right and sit there, which works fine in ff and IE.
Since i've rarely ever run into issues with Chrome that were fine in IE, i didn't bother to check until quite late:
Now i see that in Chrome, the div is just sitting below (at the bottom of) the regular content; despite the "inline" display-types and the negative margin.
Now I've tried ridiculous things to make it work, but for some reason it just won't.
Can someone tell me how i can get it to work in Chrome?
HTML:
<div class="cframe">
<div class="content">
...
</div>
<div class="sideright">
...
</div>
</div>
CSS:
div.cframe {
display: table;
vertical-align: top;
}
div.content {
display: inline-table;
width: 751px;
padding: 60px;
}
DIV.sideright {
width: 200px;
float: right;
display: block;
position: relative;
top: 320px;
margin: 0px 0px 0px -200px;
}
...this is what i'm stuck with right now, it's all quite ugly.
[link to live-page removed as the solution has already been applied]
(The sidebar is the div classed sideright, and contains a module titled Archiv)
Thank you in advance
Change the div.content css to:
div.content {
display: inline;
float: left;
}
You're using float, but then setting the position to relative. You should remove the relative part of your css for the siderright and it should fix the issue
Edit: even better you should change the position to absolute.
Set your container div to position:relative and then position:absolute your sidebar in relation to that.
.cframe {
display: table;
vertical-align: top;
position: relative;
}
.sideright {
width: 200px;
position: absolute;
top: 320px;
right: 0;
}
I didn't test the answers above but I take their word that they worked. However, your question caught my eye, because I thought you were looking for a browser hack.
There are ways that you can tell an element to behave differently on a specific browser. This happens sometimes across browsers and the best way is to hack each individual browser and give them specific instructions. For chrome, of course you'll have to use a webkit.
This would be an easy example of the syntax to follow:
<p>TEST</p>
p {color:green;}
#media screen and (-webkit-min-device-pixel-ratio:0) {
p {color:red;}
}
Try the DEMO in several browsers and notice how only chrome will display it in red
Related
I've lately come across a weird issue, where a div like the following is not behaving like expected in most browsers (Chrome, Edge) as it does in Firefox:
footer > div {
display: flex;
position: absolute;
height: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
justify-content: flex-end;
align-items: center;
}
footer {
position: relative;
display: table-row;
height: 40px;
background-color: gray;
}
I expect the div inside the footer to fill it's parent div so an element inside that div tag can be aligned vertically.
To make it work in chrome, I included the following rule
#media screen and (-webkit-min-device-pixel-ratio:0) {
footer > div { position:relative; }
}
The idea is to vertically align some elements in the footer without having to enter a specific value for its height (yes I'm more of a programmer, so I'm trying my best to avoid having to put the same value on multiple places in case it needs to be changed). How is this done correctly across multiple browsers?
The final solution just has to be supported in current versions of Chrome and Firefox so ignore all that IE not supporting CSS3 and HTML5 bull that most of other people have to consider. I'd also rather not do the styling using JS including JQuery since I feel like the layout is such a basic thing it should be possible to do without any of it.
If needed, you can also check out this jsFiddle which shows the problem in the context of the layout.
I suppose this isn't really necessary but if you want to, you can also check out the source code (it's a Spring webapp using Thymeleaf) on GitHub.
Lastly, if you feel like it, feel free to comment on other flaws in the design. This is a project I'm doing for an University course so I'm always open to improvements.
Thank you very much!
You could solve this by replacing the following for footer > div:
top: 0;
right: 0;
left: 0;
bottom: 0;
..with:
width: 100%;
height: inherit;
You'll find an updated Fiddle here. The solution seems to be working in all the latest browsers.
I'm creating a basic generic web page with a photo gallery as practice here, but for some reason I cannot get the gallery div to float next to the sidebar div so that there isn't a big empty space above it. Floating them just destroys everything. When I inspect element it shows that there's a margin taking up all of the space to the right of the sidebar/above to the gallery, but I've looked through my css over and over and can't find where that margin could be coming from. I'm not 100% sure that's what is causing the issue though.
If anyone knows how I can make this position correctly it would be much appreciated. I feel like I've tried everything and I'm just not getting it.
Here is the link to the code on jsfiddle:
https://jsfiddle.net/laurynm/h6mu6hsb/
.gallery {
width: 80%;
position: relative;
}
#sidebar {
position: relative;
width: 230px;
}
Try this https://jsfiddle.net/h6mu6hsb/4/
#sidebar {
float: left;
position: relative;
width: 230px;
}
I took a stab in the dark, and made a jsfiddle demo for you to try out. In essence, I gathered different sections in wrappers, converted them to inline-block, and hope it looks kinda like what you wanted.
How about something like this so you dont have horizontal scrolling problems:
http://jsfiddle.net/espriella/fdmdwpp5/
Using display as table-cell
.sidebar{
min-width: 200px;
display: table-cell;
}
.gallery{
display: table-cell;
width: 100%;
}
I stumbled upon a difference in layout rendering between Safari and Chrome/Firefox and I don't know which one is "right".
You can check the jsfiddle here
On Firefox/Chrome the layout is as expected, the yellow div is right after the red ones. But on Safari, the yellow div is positioned under the red ones.
After investigating what I did wrong I found out the bug comes from the CSS class E whose property margin-right (value: -11px) is bigger than the width property (value: 10px) for my div.
I think I understand why Safari renders it this way. The width of div of class B is computed as being the sum of the widths of its children as they have the property float: left;.
Here it is widthB = widthB2*2 + widthE + marginRightE + widthC or marginRightE < -widthE so widthB is not large enough to contain each div next to each other.
So my questions are:
Am I right in my understanding of what Safari does?
Why do Chrome and Firefox render differently? Are they just not decreasing the width of the parent div based on a negative margin-right?
Would the proper correction to always have a margin-right lesser or equal to the width of a div in this case?
Thank you!
HTML:
<div class="A">
<div class="C">
<div class="B">
<div class="B2"></div>
<div class="B2"></div>
<div class="E"></div>
<div class="C">
<div class="D"></div>
</div>
</div>
</div>
</div>
CSS:
.A {
background-color: blue;
height: 200px;
}
.B {
height:100px;
}
.B2 {
background-color: red;
height: 100px;
width: 100px;
float: left;
}
.C {
float: left;
}
.D {
height: 40px;
width: 40px;
float:left;
background-color: yellow;
}
.E {
height: 50px;
width: 10px;
position: relative;
left: -10px;
margin-right: -11px;
background-color: black;
float: left;
}
I'm not sure what you expect to happen with the CSS in the JS fiddle. You are delving into undefined behaviour. I say this because:
'C' is floated but does not have a defined width. This leads to issues in various browsers depending on the complexity of the layout.
None of the floated elements are ever cleared. When floating it is imperative that a clearfix of some description is used, whether it is clear:both, etc.
If you tweak the mark-up and add a clear-fix, you see that the content is always 239px. See http://jsfiddle.net/eaFn9/
However, it seems like the relatively positioned item 'E' and margin is having a negative impact on the width calculation, as Chrome's web inspector seems to always report oddly for the negative margin on this element.
If you play around with this in web inspector you can see it's almost as if the negative margin is the cause of the drop. I think it may be due to a container that does not have a width, and isn't position relative in itself.
How to fix?
Personally, I would want to re-write your layout to include fixed widths on all floats, reduce nesting of floats and clear where possible. It seems overly complex but without a real world use case it's hard to rewrite.
However, It seemed to me that you can wrap 'B2' + 'E' elements in a wrapper that is floated and relatively positioned, then use absolute positioning on 'E' to give the same affect and remove the negative margin.
This is the JSFiddle I came up with: http://jsfiddle.net/jV3Ub/
Sorry, this is not really an answer but it's too long to make it a comment...
Anyway, it took me a minute to figure this out.
I used Firefox 19 on Mac OS X 10.8.2, Chrome 24.0 (Mac) and Safari 6.0.2 (Mac as well). Using the web inspector tools, I realized the divs are not computed the same way indeed. I suck at calculations, but I took the time to sit down and look at this thoroughly, and I do understand Safari's calculations the same way you do.
In Safari, it seems that div B isn't wide enough to contain the yellow div (C) so it seems to reject it to the bottom. For the record, in my tests, I see the yellow div to the right of the red div in FF and Chrome, while Safari shows it right underneath the red, and to the upper left. I am not sure this will help, but I can only recommend you to use the web inspector tools now integrated to all modern browsers to debug this.
I'm not sure about why this happens, all I know is that by only changing the width of E by 1px, like so:
.E {
height: 50px;
width: 11px; /* added 1px to this property */
position: relative;
left: -10px;
margin-right: -11px;
background-color: black;
float: left;
}
it displays correctly in Safari.
Make the following changes to classes .D and .E:
.D {
float:left;
height: 40px;
width: 40px;
background-color: yellow;
margin-left: -11px;
}
.E{
height: 50px;
width: 10px;
position: relative;
left: -10px;
background-color: black;
float: left;
}
DEMO: http://jsfiddle.net/uryJJ/22/
I hope this helps!
SECOND EDIT:
I think we should link these two questions: https://stackoverflow.com/questions/4989930/css-negative-margin and why use negative margins? to this one.
Also See the W3C spec on margin: http://www.w3.org/TR/CSS2/box.html#margin-properties.
Section 8.3.1 Might actually explain what is going on with your sample. A collapsing margin issue not rendering correctly in Safari.
ORIGINAL POSTING:
So my questions are:
1) Am I right in my understanding of what Safari does. Why do Chrome and Firefox render differently? Sounds like that might be it, but, really, who cares? You are not getting the results you want. You should change your code unless you don't care about Safari users.
2) Are they just not decreasing the width of the parent div based on a negative margin-right?
Probably, but again, not really important.
3) Would the proper correction to always have a margin-right lesser or equal to the width of a div in this case? I would say yes. To fix the issue and get the results you want I would move the div with class E inside the right most div with class B2. Then float E to the right and remove the position, left and margin-right attributes.
.E {
height: 50px;
width: 10px;
background-color: black;
float: right;
}
http://jsfiddle.net/uryJJ/32/
FIRST EDIT
.D {
height: 40px;
width: 40px;
float:left;
background-color: yellow;
position:relative;
left: -10px;
}
.E {
height: 50px;
width: 10px;
position: relative;
left: -10px;
background-color: black;
float: left;
}
http://jsfiddle.net/uryJJ/33/
Sorry, I might be beating this to death but this fixes it:
.E {
height: 50px;
width: 10px;
margin-left: -10px;
background-color: black;
float: left;
}
http://jsfiddle.net/uryJJ/35/
I was not a fan of negative margin values until just now.
Hey guys I have an interesting set up going on. I'm working on creating SOME mobile support for an existing site. Basically when the window is brought to a certain size or the page is opened up on a phone I want to the header to do something different. That part is easy the only thing I'm running into is this.
The basic structure of my header is this
[logo][user-stuff][right-side][1][2][3][/right-side]
These elements are all in a nice line in my header. My problem is that in mobile I need one of the elements from inside the containing div on the right to float underneath the header. So I either need it to pop outside of its container or I need its container to take up with the width of the screen. The idea is that it will end up looking like this.
[logo][user-stuff][right-side][1][2][/right-side]
[ 3 ]
any ideas how this can be done? If I have to use some Javascript to make this possible that's fine, but the markup needs to be minimal as per my bosses instruction. Just a little stumped on the direction.
current html
<div id="header">
<div id="logo"></div>
<div id="user-stuff"></div>
<div id="right-side">
<div id="1" class="right-side-section"></div>
<div id="2" class="right-side-section"></div>
<div id="3" class="right-side-section"></div>
</div>
</div>
current css
#header {
height: 48px;
width: 100%;
}
#logo {
display: inline-block;
vertical-align: top;
}
#user-stuff {
display: inline-block;
vertical-align: top;
}
#right-side {
display: block;
float: right;
}
.right-side-section {
display: inline-block;
vertical-align: top;
}
Of course this is just a little bit of mockup code to give you an idea of the structure i'm working with and how everything is laid out. I just need to figure out a way to have div#3 drop underneath everything and take up the width of the screen when the screen is a certain size. Not sure how to have it breaks it's flow.
Since the header has a defined height this will be easy. Just add position: relative so that you can absolutely position child elements relative to itself.
Then you can set the css for div#3 to use absolute positioning as in the following example.
#header {
height: 48px;
width: 100%;
position: relative;
}
#3 {
position: absolute;
top: 48px;
left: 0;
width: 100%;
text-align: center;
}
See working Demo here: http://jsfiddle.net/Cce9n/
Please note that it is not valid to assign an ID starting with a number.
You may use Javascript to edit other div definitions,
E.G. changing the text-align style
document.getElementById("right-side").style.text-align = "center";
Hi all
I have 3 divs with rollover images inside them stacked vertically inside my main content div. IE7 is chopping off about three quarters of the bottom div and I can't figure out why. It displays perfectly in all other browsers (even IE6) but IE7 just won't display properly.
This is my first website so I still have a lot to learn. I've managed to fix the other IE bugs but just can't figure this one out. Any help appreciated!
.main_content {
float: left;
width: 816px;
background-image: url(Images/evokedesign_bg_tile.png);
background-repeat: repeat-y;
overflow: hidden;
}
.portfolio_buttons {
float: left;
width: 634px;
}
Site link: http://evokedesignstudio.com.au/Portfolio.html
Now you posted a link to your live site, I found the answer very quickly:
On .gallery, remove the height: 400px rule.
Done.
This fixes IE7, and nothing changes in IE8/other browsers.
You have got your .page_container set to a fixed height of 730px.
Try updating the CSS to
.page_container {
padding: 0px;
min-height: 730px;
height:730px;
}
Same with the .gallery as #thirtydot said. Either remove the height all together or update it to min-height and height below (see above example).
By placing the height below the min-height in your stylesheet, any browser that doesn't recognise the min-height tag (IE6) will then register the height below it as a backup.