I have a problem with my website and how it appears in some browsers:
http://www.karentiede.com
In Firefox 2.0 and many other browsers, the "content" column overflows to the left and appears on top of the decorative border, making some of the content unreadable.
One Q&A in here suggested that making all the pages HTML 4.01 Strict DOCTYPE might help make all browsers work the same, but that question was the reverse-worked in Firefox and didn't work in IE. Is there another/different fix I should try?
From the CSS:
.column2 {
float: right;
width: 80%;
}
From any of the pages that act up:
<body id="schedule_toc">
<div id="col1_schedule_toc">
<div class="column2">
When I check the site in http://www.browsershots.org, it looks bad on initial display in a lot of the browsers. I've had one or three (probably Firefox) readers tell me they couldn't see the text and I suspect they were probably more sophisticated users than I am a CSS-writer.
I took a look at the page and the problem only appears when you re-size the page.
The problem is your right div is 80% so when the screen becomes smaller and ratios change and that 80% then overlaps into your left background.
Take a look at http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/ to see how to set up a "static-fluid" layout.
The reason why this is happening, it seems, is because the image (floated left) isn't the height of the entire page. So, when the page isn't wide enough to accommodate both the image and the text next to each other, the text breaks to the next available whitespace.
Try floating both elements to the left, and apply a left-margin equal to the width of the "decorative" column to column2 as such:
.column1 { float: left; width: 125px; }
.column2 { float: left; margin-left: 125px; }
.clear { clear: both; }
You'll need a clearing div below both elements:
<div class="column1">...</div>
<div class="column2">...</div>
<div class="clear"></div>
The problem is definitely ratios, as pointed out by savageguy. If what you are wanting is a fixed-width left column with a variable width right (main) column then you could use this (not tested but should work):
#col1_schedule_toc {
width: 175px;
float: left;
}
.column2 {
float: right;
width: 100%;
}
EDIT: Incidentally, I noticed that (at least on the page I looked at) you also aren't closing the left column before you open the right, so technically the right column is inside the left, which will cause issues with my suggested fix. So you also need to move the closing div for col 1 so that it's above the opening div for col 2.
EDIT 2: Plus, as pointed out by Plan B, you'll also need a clearing div beneath both elements to prevent the parent (container) div from collapsing:
div.clear {
clear: both;
font-size: 1px;
line-height: 1px;
overflow: hidden;
}
In addition to savageguy's right-on-point advice, the image you have in the page (your picture, etc.) to the left is a fixed width. This is why, when the browser is re-sized, that 80% suddenly becomes too wide.
On column2, setting a left margin of the width of the image + the amount of separation you want (for example, 160 should work, but you can play with it), then making the width of the column2 100% (of the remaining width) should prevent your overlap.
[Edit: Plan B also offers a very robust solution.)
Related
Problem
I have a header with the basic HTML structure
<div id="header">
<div id="logo"></div>
<div id="navigation"></div>
<div id="userInfo"></div>
<div class="headRight"></div>
<div id="callCenter" class="headRight"></div>
</div>
I cannot change the HTML. Currently it is laid out with floats, and navigation was aligned to the bottom of the header using padding-top. However, it only works when userInfo is 2 lines, and it can be 3 or 4.
What I need to do
Using only CSS, align navigation to the bottom for all nav heights while maintaining the original layout.
What I've tried
Half a dozen stack overflow solutions including the classics position:absolute and vertical-align:bottom on parent. (The former breaks the document flow, and the latter seems not to work because other elements get in the way.)
The fiddle
Cleaned fiddle best I could, but inspect will probably still be easiest.
https://jsfiddle.net/ohrhe4u5/1/
Notes:
The tabs should just touch the bottom of the header.
callCenter is misaligned in this example as well, but you can ignore. It's much lower priority.
New fiddle
I changed header, logo, and navigation to display:inline-block, allowed userInfo to float right, gave the nave extra height to make sure there's always room, and absolute positioned the headRight items.
That leaves me with this. A little janky due to the absolute positioning and forcing the nav height larger. Any better ideas?
https://jsfiddle.net/ohrhe4u5/2/
I generally dislike float for positioning where i can help it (this is a personal preference because i find it sometimes painfully unpredictable), as such, using a combination of position:absolute, min-height and margin i believe i have recreated what you're after.
Basically this solution works by position:absolute'ing the elements that we have some idea of consistent sizes of (the logo and the navigation), then have the header element take its height from the user data and links on the right. We add a min-height to the header element though so that should the user data be reduced to 2 lines, the height is still enough to accommodate the absolutely positioned elements (given they no longer affect the height of the header element by being absolute).
JSFIDDLE
CSS
/* new parts of the css */
#header {
min-height:112px; /* in case user data is made smaller */
padding:10px 10px 0 20px;
position:relative;
}
#logo {
width: 210px;
position:absolute;
top:50%;
width:210px;
height:62px;
left:20px;
margin-top:-32px;
z-index:1; /* bring logo above the user data */
}
#navigation {
position:absolute;
bottom:0;
left:210px;
font-size: 20px;
height: 40px;
z-index: 1; /* bring navigation above the user data*/
}
#userInfo table{
margin:0 0 0 auto;
}
.headRight{
text-align: right;
padding-bottom: 0.2em;
}
I have several div Elements below each other in my HTML document:
#quote
#keyword_tree
#sticky_keywords
#stats
I have all of the float: left currently, and it works on a big screen. Within #sticky_keywords, there are also floated elements which correctly break if the page is very small. The problem is that they are only broken into several lines if the wrapper (#sticky_keywords) is already on a line of its own.
How could I get it to break so that it fits next to #keyword_tree without specifying static widths?
big screen
big http://wstaw.org/m/2011/12/17/m48.png
small screen
small screen http://wstaw.org/m/2011/12/17/m49.png.
Perhaps adding a max-width for the #sticky_keywords so that it always fits next to #keyword_tree?
With this, it works pretty good:
#keyword_tree {
float: left;
width: 200px;
}
#sticky_keywords {
overflow: hidden;
margin-left: 240px;
}
So the keyword tree is fixed (it's a compromise) but the other can use all the space there is.
It works in Firefox, IE9 and Opera:
http://wstaw.org/m/2011/12/17/Auswahl_001_.png
But not so very well in Chromium and Chrome and Rekonq:
http://wstaw.org/m/2011/12/17/Auswahl_002.png
I am not sure how it comes up with the extra margin-right.
I often run in the following problem, I have a web page with the following divs:
header
sidebar
content
footer
sidebar and content are both float left with a break afterwards.
I want content to expand to the right edge of the browser, no matter how wide or narrow the browser width.
However, no matter what I try, I am face with two choices:
content must be a fixed width
content is not a fixed with (no width property) but resizing the browser pops the content down under the sidebar
The site I'm working on has many more divs than these four so it's hard to post CSS code that is not convoluted, but does anyone have a general strategy to enable content to expand out to the browser's right edge while never popping under sidebar if browser width is made too small?
My current solution is: table.
Addendum 1
Thanks Hristo, your solution works except that sidebar and content can't have fixed heights, which causes the footer to appear in the middle. Since you aren't using floats, how do you make the footer come after both of them?
You should be able to set a margin-left to the #content and position:absolute to the #sidebar.
For example:
<div id=wrap>
<div id=content>
...
</div>
<div> id=sidebar>
...
</div>
</div>
and some css
* {
margin: 0;
padding: 0;
}
#content {
margin-left: 200px;
background: green;
}
#sidebar {
width: 200px;
position: absolute;
top: 0;
left: 0;
background: pink;
}
and the example:
http://jsbin.com/umomuk
This is the same solution that google uses on their search result pages.
UPDATE
http://jsfiddle.net/UnsungHero97/ABFG2/10/
Check out the fiddle...
http://jsfiddle.net/UnsungHero97/ABFG2/2/
Let me know if you have any questions. I hope this helps.
Hristo
On solution will be to use the minimum width:
.containerDiv {
min-width: 600px;
}
if the div is greater than 600px it will just expand, and if the window is resized to a lower value the minimum width will be 600px. However, some versions of IE doesn't support this property, a different solution will have to be implemented for IE.
This link suggest a hack, but i have not tested that personally.
CSS play
So I'm trying to code out my design for my new portfolio website, but I'm having a few issues there that research and hours of smashing my face against the computer screen have not yet solved. There are two big issues right now that I'm stuck on, though there is yet another that I'm currently considering if I even want to deal with at all.
The first issue is the menu. I want the typeface to go from regular to bold when you hover over it, or when you're on that page. Which works. Problem is when you hover over it, the other two items in the menu adjust slightly because the change in type weight pushes them out. My attempts thus far have all ended with failure.
The second issue is the footer. I want it to stay on the bottom of the page. My research has gotten me this far, but instead of what I wanted, now it actually stays at the bottom of the browser, not at the bottom of the content. Thank you for any help you can give!
The page in question can be found at: http://personal.justgooddesign.net/draft/
Your footer is getting jumbled up because you float left and clear right. My personal preference for footers always starts with this very clean method and builds from there. If you're getting confused, separate your inner content from the rest of the page and test away.
With fonts, you have to think more like a UI developer than a graphic designer. Unlike Indesign, Illustrator, etc, fonts and spacing aren't 100% pixel perfect. What will render one way in one browser will render a very different way in another. Bolding a font on the web will make it larger, and it will push spacing. To compensate for that, setup your menu elements to be a bit wider to compensate, then test like crazy. If you solely rely on margins and padding, then a bolded hover element is going to push the menu around every time.
Just a suggestion, setup your css in a separate file and load it in. The code will be cached, which will result in a performance improvement on subsequent loads. Further, you could save yourself a lot of code by doing one class to attach styling to your elements and being mindful positioning relative to other elements. There's no need to individually style every element in your portfolio for positioning.
You can fix the jump in the menu by setting a fixed width on the #menu li, so
#menu li {
display: block;
float: right;
width: 40px; //something like this.
padding: 0px;
list-style-type: none;
position: relative;
text-align: center;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
}
EDIT:
To fix the footer issue
remove height: 600px; from the #right rule
add a clearing br in between the #container div and the #footer div
</div>
<br style="clear:both;">
<div id="footer">
You have floating problems as you are not clearing your floats.
Your div#wrapper is always going to be equal to the height of the viewport.
Your div#container is collapsed beacuse you have floated div#left to "left", div#right to "right" and also have absolutely positioned div#footer. What this does is that, it takes these divs from the normal flow of the document and subsequently the div#contaiver is not "wrapped" around these three divs (div#left, div#right and div#fotter")
The same is the case with div#right. The div#intro and div#portfolio have been floated inside the div#right and it is not wrapping it's child divs.
Ther are many ways around these problems. I suggest this.
Include the following code after the last floated element.
<div class="float_clear"></div>
div.float_clear
{
clear: both;
}
For the menu, there is not enough space, Just add.
div#menu>ul>li
{
width: 50px;
}
Try this to fix your footer issue?
<p style = "clear:both">
<div id="footer">
Also
#right {
clear: right;
float: right;
height: 600px; //Remove this line
width: 490px;
padding: 0px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 0px;
}
add overflow:hidden to the container...
Whenever you have stuff that is floating, put a div around the floating content and give it
overflow:hidden;
display:block;
width: (some width);
That will fix most floating issues
This might be a very simple question, but I can't get it working.
All I want is to have 2 boxes (left and right), both should take 50% of the space and they should show up next to each other.
My current css looks like this:
#left {
text-align: right;
width: 50%;
padding-right: 10%;
float: left;
}
#right {
width: 50%;
text-align: left;
padding-left: 10%;
}
#footer {
clear: both;
}
The HTML looks like this:
<div id='left'>
<h1>Left</h1>
<ul>
<li>Some Listing</li>
</ul>
</div>
<div id='right'>
<h1>Stuff</h1>
<p>
Stuff right
</p>
</div>
<div id='footer'>
</div>
As I said, it isn't working. But I think it should be clear what it should do.
You have to take the padding and margins into account. Putting 50% on each <div> while specifying any padding other than 0, will cause the <div> to wrap. Try removing the padding on the <div>, or reducing the width from 50% to, say, 45% and see what it looks like.
There are 2 things I needed to do to make it work:
1) The width + padding of each div must only add up to 50%. Otherwise, in your original code, they add up to 60%, and both add up to 120%, and they can't fit in the 100% width of the body.
2) I have to also float the second div to the left, or make both div overflow: hidden
(i am still looking into why step 2 is needed)
A full style reset will make sure you avoid falling foul of anything that XSaint mentioned. Margins, Borders and padding will affect this.
So you should make sure that these elements have:
div {
margin: 0;
padding: 0;
border: 0;
}
If you wish to have padding and borders, be sure to reduce the width of the elements accordingly.
One document worth referencing is the box model, that picture is worth 1000 words:
http://www.w3.org/TR/CSS2/box.html
In the note below that diagram, it states that the width affects the width of the content box, not the padded, bordered or margined box. That is the box inside all the others.
you may either do what XSaint32 has suggested or remove the padding from the #left div and put another div #context with the padding inside the #left div. i.e)
Xsaint and Danny Staple gave the best answers so far.
Just complementing their answers, you can also use a property named "box-sizing" in order to ensure correct calculations.
I even recommend adding this property to your (and everybody else) CSS reset, hence Webkit, IE, Opera and Mozilla tends to use different box models.