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

CSS

Posted by Luke Glazebrook
Luke Glazebrook
13,564 Points

Layout Issues

Hi guys!

Recently I have been working on my CSS again and trying to get better and I think I have been getting better at it. However, no matter how good I seem to get at it I can never make a good looking layout. I know what margin, padding, border and etc all do but I can never get a layout to do what I want and etc.

Has anyone else had this problem when first starting to make layouts? Do you guys have any tips?

Sorry I have been flooding the forum with Web Dev topics today I just need to get some problems ironed out!

Hope you guys are all having good days!

-Luke

Chris Shaw
Chris Shaw
26,676 Points

Hi Luke,

What types of layouts are you trying to create?

Depending on what they are you can achieve the result using various techniques that work across all browsers flawlessly.

Luke Glazebrook
Luke Glazebrook
13,564 Points

Hi Chris!

I'm not speaking specifically about any type of layout, my problem is that I can think of great layouts but can never get them to look like I imagined. I know HTML and CSS pretty well it just seems that I am really bad at layouts.

-Luke

4 Answers

Kyle Meyer
Kyle Meyer
5,459 Points

Hey Luke Glazebrook,

Have you tried starting in Photoshop or Illustrator? Until you start innately understanding what the constituent pieces of a good design are in your own mind, it may be worth spending some time in a program where changes can happen quickly and you can worry about the aesthetics of your app without worrying about the technical implementation details. Many of the designers here at Treehouse start out in Photoshop as well!

Hope this helps.

:zap:

Luke Glazebrook
Luke Glazebrook
13,564 Points

Hi Kyle!

No, I have ever actually tried this surprisingly! Maybe I should make some Wireframes in Photoshop and see if I can get my sites to look like them.

Thank you! That certainly was a big help!

-Luke

Esteban Valdez
seal-mask
.a{fill-rule:evenodd;}techdegree
Esteban Valdez
Front End Web Development Techdegree Student 8,858 Points
Esteban Valdez
.a{fill-rule:evenodd;}techdegree
Esteban Valdez
Front End Web Development Techdegree Student 8,858 Points

Hey again,

I have had layout issues before too. Thing is, each situation is different. Sometimes you may need to float things, other times flexbox, and still others tables for tabular data might give you what you are looking for. What is going wrong with your layout? Is it a site you have built from scratch or someone else' existing site? Also, is it a theme through WordPress or ground up?

Luke Glazebrook
Luke Glazebrook
13,564 Points

Hi Esteban!

That is very true and I do try a various amount of different things to figure out the solution to my problem but I can never figure it out!

At the moment I am having some problems with the header on a site that I am working on. It was built from the ground up by myself.

Thanks for your reply!

-Luke

james haley
james haley
12,630 Points
james haley
james haley
12,630 Points

I would recommend this nice piece of code put together by Joni Korpi called the Golden Grid System. You can find it at http://goldengridsystem.com. It is a template for a fluid layout and it has a nifty javascript tool to see how everything is lining up so your page and text can have a great rhythm. It is really easy to use too!

Luke Glazebrook
Luke Glazebrook
13,564 Points

Hey James!

Thanks for the handy link, it certainly looks like a useful tool that I will use! However, it would be great to be able to make my own layouts as well without relying on other code written for me already.

-Luke

Aurelian Spodarec
Aurelian Spodarec
7,369 Points
Aurelian Spodarec
Aurelian Spodarec
7,369 Points

When I started to layout the webpage , it wasn't easy , everything what shoudnt move , moved : p as I get better , some of it still would get move or maybe It supposed o be ike that. I did make cople of webpages as a trial for me to learn and every webpage I did , I got better at it . You might just go and opy random webpages like Lynda, you might copy that or treehouse but without JS .You will learn new things throw it and expant your logic .

I think you should also focus on main part of building a webpage. Like clear both , floats, position absolute and relative, when using % and how to wrap things properly . That's mine opinion and that I think its importand .

Hope this helps and so all other posts combined :)

Luke Glazebrook
Luke Glazebrook
13,564 Points

It is relieving to hear that other people have also experienced these problems and got through them! That is a good idea actually I never thought of it. I may try out replicating some designs of sites that I like and see how that goes!

I will definitely take a look into the areas that you have suggested!

Thank you very much for the reply!

-Luke