Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by James Ingmire
James Ingmire
11,901 Points

Webpage layout help needed. Div widths not same as each other? HTML CSS

The following Website when resized below my browers width starts to break, the background image is fixed and width set to 100vw. The other divs below no matter what size I seem to try always leaves a margin on the right handside, also when resized a margin appears below the main fixed image.

Was trying to fix this issue but struggling as didn't write the site and I'am lost in the code a little now, maybe loosing my mind as done this stuff plenty of times, however any ideas or thoughts on the matter would be much appreacted.

Many thanks.

Michael Jurgensen
Michael Jurgensen
8,341 Points

Hi James,

Does the image need to be resized when the browser is resized? I can get it working if the image is a constant size.

5 Answers

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hey James,

Have you tried looking at the code using the Chrome dev tools?
You should be able to see the css that is effecting the element when you resize it to the point where it breaks.

Hope this helps.

Michael Jurgensen
Michael Jurgensen
8,341 Points
Michael Jurgensen
Michael Jurgensen
8,341 Points

Hi James,

Try this:

.fixed_position {
    background-repeat: no-repeat;
    background-size: 100% auto;
    height: auto;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    min-height: 100%;
    min-width: 1024px;

Is this what you what for the background image?

James Ingmire
James Ingmire
11,901 Points
James Ingmire
James Ingmire
11,901 Points

Hey Michael, thanks for your feedback, this doesn't solve the problem I'm afraid. If you look at the site when resized (and scroll right) the about (blue section) and contact (below about) is not taking up the full width of the screen and leaves a gap on the right while the background image also causes a gap to appear above the about section if you resize further.

If you resize the browser smaller you will start to see the layout breaking, any ideas on how to stop this happening, not bothered about it being responsive or anything, just want it to look ok on tablets etc at the moment there are uneven divs forming down the right hand side of the page. I want them to span the whole width whatever viewport size.

Any more help would be much appreciated thanks again!

Michael Jurgensen
Michael Jurgensen
8,341 Points
Michael Jurgensen
Michael Jurgensen
8,341 Points

I got the blue section to fill the width of the browser. Here is my code. (I added the last two lines)

#about 
{
background-image: url("images/Smithys_bluebox.png");
background-repeat: no-repeat;
background-color: #5680BB;
padding: 50px 0;
margin-top: 0VH;
width: 100%;
padding-left: 35%;
}

I don't have professional web design experience but I hope this is a step in the right direction.

James Ingmire
James Ingmire
11,901 Points
James Ingmire
James Ingmire
11,901 Points

Hey Michael,

No afriad not working, thanks for your input. After a while, I sat back and worked out that it was one image (inside the div "product-illustration") pushing the layout across the screen i.e. causing the gap on the right when down sizing the browser. I added a width of 100% to the div and that caused the layout to stay in-line with each other. I then took out a background width 100vw style (.fixed_position) in order to stop the main image from expanding.

However now I'am left with the desktop version working with no issues, the tablet and phone issue has not changed tho. I think it is so much harder to edit other peoples code as the grid system is rather complex and hard to take all in to see the bigger picture. I'am sure I will find the answer eventually. Thanks very much for your help.

Will let you know if I get to the bottom of this layout fix.