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
Gard Mikael Fjeldavli
19,416 PointsProblems with header and float
Im kinda new to css and are having some trouble with creating a header. I have a div called header which is taking up 100% of the page width. Inside the header I have a image at the far left, which I float left. I then got a header text (h1)which is a block element, and then to the far right I have another image, which if float right. I want all the items (the two images and the header text) to appear on the same line. It looks good with the image that is floated left and the header text, but the image which is floated to the right is forced down to the next line, ruining the look of the header. It kind of works if I make the header text a inline element, but that makes it difficult to center the text. How do I properly style my elements so that they are all on the same line, and scale well depending on the browser width?
10 Answers
Michael Pare
6,358 PointsAll block elements without a specified width will expand to the width of their container which is why your second image is being displaced to the line below.
There are a number of ways you can address this depending on your needs. If there are three distinct portions of your header that you want to resize and keep their proportions, you may want to wrap them in divs that specify their weight as a percentage e.g.
<!--BANNER-->
<div class="banner-image-one">
<img src="yourimg" />
</div>
<div class="banner-header">
<h1>banner header text</h1>
</div>
<div class="banner-image-two">
<img src="yourimg-two" />
</div>
.banner-image-one {width:20%; float: left; padding-right:2%}
.banner-header {width:20%; float:left;}
.banner-image-two {width:66%; float:right; padding-left:2%;}
I wouldn't recommend using those exact styles, but they will demonstrate the concept. If you are building a responsive site, you should be using some kind of responsive grid to help you define column widths. Here are some of the responsive grids available on the web http://designinstruct.com/web-design/responsive-css-grid/
Roland Cedo
21,261 PointsCan you post your HTML / CSS?
Roland Cedo
21,261 PointsCan you post your HTML / CSS?
Roland Cedo
21,261 PointsCan you post your HTML / CSS?
Gard Mikael Fjeldavli
19,416 Points<div class="header">
<a href="#"><img id="list_btn" alt="List Icon" src="../img/list.png"></a>
<h1>SmartHouse</h1>
<a href="#"><img id="profile_img" src="../img/user.png" alt="Profile Picture"></a>
</div>
h1 {
border: 1px solid black;
margin: auto;
text-align: center;
padding: 10px;
display: block;
font-family: 'Play', sans-serif;
color: white;
text-shadow: 2px 2px 5px #7C7C7C;
font-size: 3.25em;
}
.header {
width: 100%;
height: 80px;
position: fixed;
}
#list_btn {
float: left;
padding: 28px;
border: 1px solid black;
}
#profile_img {
float: right;
padding: 17px;
}
Richmond Lauman
28,793 PointsThis is not an answer to your question Gard, but I am curious to ask.. How are you organizing your html and images in relation to the root directory? Seeing ... at the beginning of the file paths to your images makes me wonder. I am used to seeing html written with the root folder as a reference, so seeing a path that takes you to an img directory outside of where your html is located has me befuddled.
Gard Mikael Fjeldavli
19,416 PointsIn my root folder I have several folders. My header file is a php file and since i use it in several pages I have it in an include folder. I also have a folder in my root folder for images. So to get from my include folder to my image folder i have to move up one directory (this is the two dots in the beginning of the url) and then the rest of the path.
Richmond Lauman
28,793 PointsI am still confused. LOL Even if it is an include, if it is included in a file in the root folder, the path should be relative to a file in the root folder. I must be missing something. The file the header php is included to must be within a sub directory of the root as well I suppose. Oh well it doesn't matter if I understand it if it is working for you. ;-P
Gard Mikael Fjeldavli
19,416 PointsHehe, I not sure if I'll be able to explain it then. The index file is in the immediate root directory. The index file includes the header from the include folder. And in the header file I point to images which is in another folder in the immediate root folder. So from the include folder I write ".." to go back to the root directory, then I append "/img" to get to the image folder, and lastly I add the image I want ie "/list.png"
Richmond Lauman
28,793 PointsIf the header is an include file being used (included) in the index file (which is how I would expect it to work and why I am so confused) and the path to images in an img directory located in the root directory then a file path that starts as ...img/ should not work. The output to the browser would be HTML that tells the browser to go outside of the root directory to an img folder that is not there. The browser would see the header HTML as part of the index.php file and any file path would have to be in relation to the root folder where index.php resides. Obviously it seems to be working for you with that file path, but I just cannot understand how. I don't want to waste your time though. I will just stew in my confused juices. lol
Chris Dziewa
17,781 PointsRichmond, the code that he posted is from the includes folder that is located in the root directory. That code is included on the index page, but the image must be referenced based on the location of the image from the includes file. So from the includes folder, he must go up one level (../) to return to the root. Here he finds his img directory and selects it by adding img to the path. Finally he adds the image name located in this folder to the end of the path.
Hopefully this clears up any confusion you might have had.
Richmond Lauman
28,793 PointsI am beginning to doubt my sanity here... the code for his header tag is in an include file in the include directory within the root and is included in an index.php file that is in the root directory where the img directory also resides. I understand all of that.
What I do not understand is why the image path for an image src, in the header include file, would need to use a path relative to the includes directory. When the PHP for the index page is processed it will return that include file to the browser as HTML IN THE INDEX.PHP FILE as it is written. So having an src with a file path relative to the includes directory and not relative to the root directory does not make sense. If the file path is .../img/somepic.jpeg then the browser is going to look for that image relative to the root directory, not the includes directory. I am pretty certain that the src file path is supposed to be relative to the index.php page, not the include file.
Chris Dziewa
17,781 PointsRichmond, you're not going crazy, I see it too! Maybe Gard actually has his index.php in a folder within the root? That's the only explanation I can think of, though that would be a lot of extra work to access that home page. With his settings on a file of my own I just get a broken image. It would probably make a lot of sense if we could see a file directory structure. I only use BASE_URL and ROOT_PATH constants so I don't really deal with the relative path much in PHP except for including the config file. This is a very unique situation though!
Gard Mikael Fjeldavli
19,416 PointsThis is the folders in the root dir and the files within them:
/img -list.png -user.png /inc -header.php /css -style.css
Index.php does not reside in any subfolder. It is just in the root. I dont know guys....it works just fine for me.
Chris Dziewa
17,781 PointsAs long as it is working that is what matters! Were you able to fix your layout issues?
Gard Mikael Fjeldavli
19,416 Pointsoh..yes. I did as Michael (above) said, and wrapped the elements in divs and gave them a % width. Works fine =)
Chris Dziewa
17,781 PointsGlad to hear! Definitely try using grid systems too. I just started using them for my own project and it makes it 10 times easier to layout content.