I'm really having a hard time with IE7 as it is making part of my page fluid where it should be fixed. Works fine in every other browser but IE.
Here is the link... . If you shrink the window you will see how the page gets all skewed.
Here is the css used to control the 2 columns, left_body being the left content and right_body the right column.
#left_body
{
float: left;
width: 900px;
}
#right_body
{
padding-right: 5px;
float: right;
width: 200px;
}
Figured it out. Had position:relative, needed to be position:static
Related
How do you code a three-column layout in CSS when the source order jumps around from column to column?
The page has seven sections -- this fiddle shows how the required source order compares to the layout. The number is for its position in the source order and the text is where it should appear on the page.
http://jsfiddle.net/hpr2b/4/
As you can see, there are essentially three columns and three rows, but the elements in the second row shouldn't top-align and the second row shouldn't clear the first row. Each section should be flush with the bottom of the section that is located above it.
Notes:
The source order matches the order that the elements need to appear on mobile devices and unfortunately cannot be changed
I also don't have the option of duplicating sections in the markup and then showing/hiding them based on viewport width
Absolute positioning is unfortunately not an option because the layout must adapt to any viewport width 320px and up
I've tried a number of well-known CSS layout techniques and the above fiddle shows the most successful attempt -- here is the code used for the "top row":
.top-center {
float: left;
width: 55%;
margin-left: 25%;
}
.top-left {
float: left;
width: 25%;
margin-left: -80%;
}
.top-right {
float: right;
width: 20%;
}
Here are the problems I'm encountering:
IE 9/10 is a complete mess (see below)
In Chrome, the "Middle Right" div always clears the "Top Left" div, preventing it from being positioned beneath "Top Right". Also, if the "Top Right" div becomes too tall, it overlaps "Middle Right".
In Firefox, the second "row" top aligns, overlapping the left and right sections of the first row.
Here is what it looks like in IE10:
And here it is in Firefox:
If the positioning is that important and you cannot control the (order of the) HTML code (I assume so from reading your question), I would rather go for having a somewhat usable absolute positioning using CSS, and refine it (onDomReady) using javascript (which gives you a lot more freedom to choose the best algorithm for the layout you need, but still a usable yet not perfect layout for those few anti-javascript-guys out there).
However, it is hard to tell without seeing the actual markup and requirements.
If absolute positioning is absolutely not an option, you'll need to calculate the height of elements prior to the page generating and put each block into the correct column based on heights. Trust me, absolute positioning is much easier!
You'll probably want something like Masonry. It sets up the columns for you as you require. It does rely on absolute positioning, but that's just about your only easy option. You'll need to tinker with the code a little to make it responsive, I did it on an in-development site here but I can't entirely remember what I did, sorry. Feel free to look through the source code though.
Masonry is pretty quick; below is the basic setup, here are more details.
HTML
<div id="container">
<div class="item">...</div>
<div class="item w2">...</div>
<div class="item">...</div>
...
</div>
JavaScript
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
// options
columnWidth: 200,
itemSelector: '.item'
});
I managed to make the following layout with CSS only: http://jsfiddle.net/hpr2b/7/
.top-center {
width: 55%;
float: left;
margin: 10px 0 10px 25%;
}
.top-left {
float: right;
width: 25%;
margin: 10px 75% 40px -100%;
}
.top-right {
float: right;
width: 20%;
margin: 10px 0 40px 0;
}
.mid-center {
margin: 10px 20% 10px 25%;
clear: left;
}
.mid-left {
float: left;
clear: right;
width: 25%;
margin-top: -20px;
}
.mid-right {
float: right;
clear: right;
width: 20%;
margin-top: -20px;
}
.bottom-center {
margin: 0 20% 10px 25%;
}
I've been trying to make a joomla template with on the left and on the right a bar with fixed width. the main div should be responsive.
I managed to create the layout what i want here:
http://dennybeulen.nl/rena/nl/over-ons.html
The only thing what is not working is the menu on the left side. When i change the css the menu works, but the layout is not right anymore.
the menu is working if i make these changes (just removed the '-' in front of 130):
div.fluid{
margin-left: 130px;
}
hope somebody can give me some hints.
Looks like div.fluid is covering your left column.
Try making div.left absolutely positioned and setting your div.fluid to having no left margin:
div.fluid{
float: left;
width: 100%;
margin-right: -290px;
margin-left: 0px;
}
div.left{
position: absolute;
width: 130px;
min-height: 1px;
padding-top: 10px;
}
Keep in mind, div.left will no longer affect elements floating against it.
#gaynorvader is right in that your middle container lays on top of the menu. Instead of positioning it absolute, you could also just leave everything as is, and only add position:relative;z-index:1 for div.left.
Here's the page: http://www.thresholds.org.uk/museums-collections-poets/kettles-yard/
It looks great in Chrome even when you resize the browser, everything looks great. However, in Firefox, columns overlap one another and images don't resize.
The main grid classes are .c-1 (the smaller width column) and .c-2 (the width of two .c-1 columns). Whats going on in my code to cause this problem?
For quick reference, I'm using CSS3 box-sizing: border-box for my grid, here's the code for my .c-1 and .c-2 classes:
.c-1 {
width: 288px;
float: left;
margin-left: 28px;
display: block;
}
.c-2 {
width: 604px;
float: left;
margin-left: 28px;
display: block;
}
.c-1:first-child, .c-2:first-child, .c-1:nth-child(4n+1) { margin-left: 0; }
I'm also using the following code for responsive images:
img {
border: 0;
-ms-interpolation-mode: bicubic;
vertical-align: middle;
max-width: 100%;
height: auto;
margin-bottom: 1.875em;
}
EDIT Ok I've seemed to have fixed the responsive images for most sections now. A classname of .active was missing a width value but I've still got a crazy problem with the Blog section. Even though the same layout has been used on that page (.c-1 and .c-2 inline together) this section seems to overlap one another...odd!
Ok well it seems Firefox doesn't like calculating widths of elements when these elements don't have a width specified, which explains why responsive images were not working. An image set to max-width must have a container with a set width otherwise images won't scale.
I thought browsers defaulted elements to 100% width, if a width hasn't been specified in the CSS?
Anyways, all fixed now. Put widths on your wrappers people!
I have padding to the right of my archives and search page and I believe it has to do with my body element, however I'm not quite sure what is different on these pages are from the other pages on the site of which are all fine for style wise as they all use the same format. It's a wordpress website. As I said, it's only happening to this page and the search page and all others are fine, so I'm confused as to what it's doing.
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background: url(img/BG.jpg) repeat; min-width:1024px; }
body { margin: 0px; padding 0px; font-size: 13px; line-height: 1.231; background: url(img/NAV-bg.jpg) top repeat-x;}
header { width: 960px; height: auto; margin: 0 auto; display: block;}
#container { width: 960px; margin: 20px auto; padding: 0 1.5em;}
aside { width: 260px; height: auto; float: left; position: relative;}
#main { width: 650px; height: auto; float: right; position: relative;}
#footer { width: 100%; min-width:1024px; display: block; height: 503px; background: url(img/FOOTER-bg.jpg) repeat-x; background-color: #821d20; position: relative; top: 100px; }
If you decrease the size of your window you'll notice that a scroll bar on the bottom of the page shows up and then the padding on the right starts to take shape. If you make your window larger that padding space is then gone and the scroll bar on the bottom disappears. Have I restricted my body tag in any way to have this happen?
I've looked through this one but I already have a min-width defined.
Website has strange whitespace on right side of the page when the browser is resized to a smaller window
In your style.css file at Line 108, remove the width attribute from the header tag to fix your horizontal scrollbar issue.
Fixed CSS:
header { height: auto; margin: 0 auto; display: block;}
For review, 3D View in Firefox browser shows the header as the gray bar with is the root of your problem. The other styles that create the text are not affected.
Tip: Right mouse-click the above image and view in new tab to see in original size.
Ah, if I'm understanding your problem correctly, it appears that the tag header, specifically its style width: 960px, is what is causing this peculiar occurrence. The containing div around the header, #main, only has width: 650px. As a result, the excess width of the header causes it to extend beyond the edge of the div.
The reason why it seems to be appearing as padding only at smaller screen widths is because the containing div around all that, #container, is centered by its margins - so the effects of the over-wide header won't become apparent until the browser is thin enough such that its right edge begins to overlap the right side of the header.
Rather than fixing this by just dropping the width: 960px from the styles of the header (which may mess up the site where this width for header tags is actually needed), I would suggest adding an overriding class to all offending tags, perhaps on the lines of .archive-header { width: auto; }. But I guess the solution is up to you, since you probably know the site better than I do.
I hope this helps! (I really do, otherwise you'd have read all this for nothing! Sorry if you did...) For the future, try downloading Firebug for Mozilla Firefox, which has a handy element inspector which will let you play around with the styles of elements to see what works. It should help you spot these kinds of issues on your own, so you can fix them quicker.
I am not sure why the about field on my site, sailing down in IE7 (see http://img.skitch.com/20090629-t8mcp6tffd8kpwxrbk1rchc6wu.jpg). (It looks fine in FF for example). Who can suggest a way to fix it?
Steps to reproduce:
Go to http://j-in.org.ua:9000/account/login
Login using data (login: test, pass: test)
You will see same as on attached image :(
From what I can see you need to have two columns just have a containing section and place two floating divs inside of them then they will sit together and you can adjust either to your liking.
content {
clear: both;
width: 950px;
padding-bottom: 10px;
background:#fff;
overflow:hidden;
}
contentLeft {
float: left;
display:inline;
width: 630px;
margin: 10px;
background:#fff;
}
contentRight {
float: right;
width: 270px;
margin-top:25px;
margin-right:15px;
background:#d7e5f7;
}
Obviously you will need to adjust the size of the columns to suit your site as well as colours etc but that should do it. You also need to make sure that your ContentLeft and ContentRight widths do not exceed the Contents width (including margins).