I am working on a simple footer which includes a responsive banner at the bottom.
I want to get the banner which is always 100% width, and there are two divs into it, and I need space-between effect.
I've tried with Flexbox and it works in HTML, but when I pasted signature to Gmail then there were just display flex, but it looked like flex-start, not space-between.
Now I did it with float and it looks like this:
<div style="width: 100%">
<div style="float: left;">
left div
</div>
<div style="float: right;">
right div
</div>
</div>
It works (I mean I can see space between divs), but in Chrome the banner is too wide and user need to scroll in X to see right div.
I cannot use a HTML code. All I can do is copy a signature and paste as a new Gmail Signature. When I am copying content from Firefox it's works (copy from Firefox and paste in Firefox, but when I paste it in Chrome it works as well).
I've checked floats and justify-content at https://www.caniemail.com/ and this should be supported so I am really confused at the moment:D
Related
I'm creating an HTML page which is comprised of two sections; header and body. Rather than use a position:fixed header and allowing the whole page to scroll, I have used a normal header and made the body a scroll container. This is because there are fixed/sticky elements in the body which need to stick to the bottom of the header (and also due to problems with dynamic sizing of the header and body). The problem is that we have various UI elements which appear smooth across the header/body boundary. Our application's layout is responsive to screen size, and now the body may have a scrollbar, but the header doesn't, so they don't quite line up.
I have fixed this problem by having the body elements have a reduced width, and then using a position:absolute background div at the end, to overlap where the scrollbar would go, with the same background colours as the main UI element so they appear to be part of it. This means the header and body would keep a consistent width regardless of scrollbar.
The basic issue with this solution is that when the vertical scrollbar is shown, the browser also shows a horizontal scrollbar so that the user can "see" my placeholder background div, even though it doesn't occupy any of the width. I've tried a few different values for stuff like overflow, etc, but what it really boils down to is that none of them can show the placeholder divs when the scrollbar is not present without making a mess when it is present. There doesn't seem to be a CSS property for when the scrollbar is shown so that you can change the CSS as needed.
I've looked at e.g. scrollbar-gutter but we can't really use this as we need to continue supporting Chromium 88 as well as Firefox, iOS Safari, and similar. overflow:overlay would be ideal but isn't a well supported feature.
Some have suggested a mix of position:relative and position:fixed, but if I apply the right styles to get the element into the right place when there is no scrollbar, then it still causes the same issue when there is one.
Please see the following snippet (I tried the inbuilt one but it doesn't seem to work super well with content that requires scrollbars and such). I've created simple fixed-height divs to demonstrate the different content that I'm dealing with right now. The blue boxes should appear to go all the way across but don't need interaction right on that last bit. The red and green boxes should always line up, even though their layout is width-dependent and only the bottom section of the page scrolls if you shrink it down. These goals are achieved but when you shrink the page so that the vertical scrollbar is needed, the horizontal scrollbar also appears.
<html>
<head></head>
<body style="height:100vh;display:flex;flex-direction:column;margin:0">
<div style="height:200px;flex-shrink:0; max-width:calc(100vw - 17px)">
<div style="height:100px;background:blue; width:100%; position:relative">
<div style="position:absolute;width:17px;right:-17px;height:100%;background:blue"></div>
</div>
<div style="height:100px;background:red;margin-left:200px; width:50%"></div>
</div>
<div style="flex-grow: 1; overflow: auto;">
<div style="max-width:calc(100vw - 17px)">
<div style="height: 100px;background:green;margin-left:200px; width:50%"></div>
<div style="height: 100px;background:blue; width:100%; position:relative">
<div style="position:absolute;width:17px;right:-17px;height:100%;background:blue"></div>
</div>
</div>
</div>
</body>
</html>
This is my first post on Stack Overflow so thank you in advance for your thoughtfulness and assistance.
I am using flexbox on my site to change the order of my content on mobile. My site uses a sidebar and has some boxes at the bottom which are outside of the main content div.
<div id="content">
<div class="10col">
*content body*
</div>
<div class="2col">
*sidebar*
</div>
<div id="greyboxes">
*grey box content*
</div>
When screen width allows this layout works great with the main content and sidebar side-by-side and the grey boxes below. The sidebar content are CTAs to other pages.
However on mobile I want the CTAs in the sidebar at the end of the page after the grey boxes.
Currently I'm using flexbox to reorder the content and it's working well. However on mobile it's shifting my content out of the body div.
Mobile without Flexbox:
-Body
-Sidebar
-Grey Boxes
Reordered with Flexbox:
-Body
-Grey Boxes
-Sidebar
I've searched Stack Overflow and Google but no one seems to be having a similar problem, and being new to flexbox I'm sure I'm doing something incorrectly.
If you use the inspector's mobile view to view http://dev.collegesurveyservices.com/our-evaluation-process/ you will see the problem.
I have an element in my site's footer that's floated to the right, and it works great, except that in Chrome, when I resize the window, I have certain styling that sets the display to block without floats (check out the example here), but problem is, when I resize the window back to large size, even though float:right is applied, the element appears below other elements in the footer. The weird thing is...unchecking the float:right style and checking it again in inspector returns the element to its normal position. Anyone know what might be causing this?
Its likely that your twitter link is causing some weird things, if you dont mind your hosted in cali text above the rest you could move it to be the first element in the tag and that will fix your re-size issue.
Or since it looks like you are using twitter bootstraps grid you can just use their class like:
<footer class="container" role="footer" style="display: block;">
<span id="copyright" class="col-xs-12 col-sm-4 text-left">©2013 Anton Pugachevsky</span>
<span id="social" class="col-xs-12 col-sm-4 text-center">
<a href="http://twitter.com/antonpug">
<img src="http://antonpug.com/wp-content/uploads/twitter-social-icon.png" />
</a>
</span>
<span id="random-blurb" class="col-xs-12 col-sm-4 text-left">Hosted with ♥ in California</span>
</footer>
Use text-align: right; on parent element and use only float:left; on child elements where needed or use other type of alignment.
It is more a workaround, but not the solution. This problem appears to be some kind of chrome style refresh bug, as reaplying float style or refreshing page solves this.
i just went to test a website in firefox 4 (beta 10) and the horizontal menu is showing up vertically.
In chrome, the menu is horizontal like this:
but in firefox 4 it shows up like this:
I am using the superfish horizontal menu. The examples on the website seems fine in firefox 4.
how would i begin to investigate if this is a bug in firefox 4 or is there something wrong with my horizontal menu code??
I don't think your problem is with superfish or the underlying suckerfish. A quick look indicates that <div id="title"> is floated to the left but the floats aren't cleared between that and <table id="menuHeader">. The #menuHeader table and hence the <ul> are positioned right beside #title in Firefox so the table doesn't get enough width for the floats to layout horizontally.
As a quick hack you can stuff a <br/> right before #menuHeader:
<br /><table id="menuHeader">
and you should see the Firefox problem go away. However, you should explicitly clear your floats somewhere sensible after #title and before #menuHeader. Clearing between #header and #flashwrapper seems appropriate:
<div id="header">
<!--...-->
</div>
<div style="clear: both;"></div>
<div id="flashwrapper">
<!--...-->
</div>
You might be able to use an overflow:hidden clear fix for this too but I tend to prefer explicit clearing even if it does pollute my HTML with styling information.
And as far as how to debug this sort of thing goes, the DOM inspector in WebKit browsers (such as Chrome and Safari) is freakin' awesome. Firebug's DOM inspector is also pretty good. In a case like this, you'll want to use them both concurrently. DOM inspectors, guess work, experience, and lots of swearing are my tools for figuring out things like this.
I have kind of a weird problem ..
Something that isn't working on ff & safari but IS working on IE on itself is already pretty weird but I can't seem to figure out this problem..
On my site http://www.turnkring-excelsior.be there are links to social media in the top right corner (youtube, facebook and flickr), on IE they are linked, on ff & safari they aren't ..
Now, I narrowed the problem down .. It seems to be related to the width of my wrapper div, in my css file I declare the width of this div to 1000px. If I enlarge this to say 1200px, the links DO work on FF & safari..
If I enlarge it just a bit, like say 1050, the flickr link works only (the one at the far right)
Does anyone have any suggestions ?
This is a combination Positive Margins errors, where you have attempted to line up your divs the way you want them. Essentially you've managed to place one div over another, hence blocking the links.
#social currently has a positive top-margin of 23px, whereas #image has a number of margins defined on nearly all sides presumably to force it over to the right, below the social links? Due to the margins of #image overlapping with the content of #social the browser thins that #image is another layer.
You will need to work out a better way of positioning these, perhaps two container divs acting as columns floated.
Pseudo (not tested):
<div id="container">
<div id="top-bar">
<div id="menu" />
<div id="social" />
</div>
<div id="left">
content n stuff
</div>
<div id="right">
<div id="image" />
</div>
</div>