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
Phil White
Courses Plus Student 9,519 PointsHow do i get a image to sit next to text with a grid?
Hi, Im trying to get a image to sit next to some text and im using a grid with 12 columns. i used the class grid-8 for the text and grid-4 for the image but the image wont sit side by side with the text it just drops below it. what am i doing wrong?
12 Answers
Don Howard
5,827 PointsHi Phil,
It would help if you posted your code here. Without seeing the code and knowing exactly what you want to accomplish we can only guess. But, my first guess is that you need to add a "float" property to your css.
Hope that helps and I will look for your reply. Don
Phil White
Courses Plus Student 9,519 Points<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/grid.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:700' rel='stylesheet' type='text/css'>
<title>Pixel Sky | Web Design</title>
</head>
<body>
<div>
<header class="top-bar">
<img src="css/img/Pixel-sky.png" alt="Pixel Sky">
<a href="index.html" id="logo"></a>
<nav>
<ul>
<li class="home"><a href="index.html">Home</a></li>
<li class="portfolio"><a href="#">Portfolio</a></li>
<li class="about"><a href="about.html">About</a></li>
<li class="contact"><a href="#">Contact</a></li>
</ul>
</nav>
</header>
</div>
<div class="container">
<div class="grid-8">
<h2>Column One</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu enim dapibus, convallis nisi a, auctor risus. Integer interdum dolor id magna luctus, a euismod odio commodo. Aenean at lacus vitae lorem pulvinar porttitor eget eget tellus. Vestibulum nibh erat, ullamcorper sed mauris in, hendrerit egestas mi. Sed hendrerit sagittis ipsum. Sed et mauris et enim vehicula luctus sed ut lacus. Fusce eu faucibus nunc, vel gravida nunc. Ut ornare mattis nibh non imperdiet. Fusce in vulputate nunc.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu enim dapibus, convallis nisi a, auctor risus. Integer interdum dolor id magna luctus, a euismod odio commodo. Aenean at lacus vitae lorem pulvinar porttitor eget eget tellus. Vestibulum nibh erat, ullamcorper sed mauris in, hendrerit egestas mi. Sed hendrerit sagittis ipsum. Sed et mauris et enim vehicula luctus sed ut lacus. Fusce eu faucibus nunc, vel gravida nunc. Ut ornare mattis nibh non imperdiet. Fusce in vulputate nunc.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu enim dapibus, convallis nisi a, auctor risus. Integer interdum dolor id magna luctus, a euismod odio commodo. Aenean at lacus vitae lorem pulvinar porttitor eget eget tellus. Vestibulum nibh erat, ullamcorper sed mauris in, hendrerit egestas mi. Sed hendrerit sagittis ipsum. Sed et mauris et enim vehicula luctus sed ut lacus. Fusce eu faucibus nunc, vel gravida nunc. Ut ornare mattis nibh non imperdiet. Fusce in vulputate nunc.</p>
</div>
<div class="grid-4">
<img src="css/img/Phil.png" height="150px" width="150px" alt="Phil">
</div>
<footer>
<p> © 2014 Pixel Sky</p>
</footer>
</body>
</html>
Phil White
Courses Plus Student 9,519 Pointsheader {
width: 100%;
height: 210px;
background: #D3D3D3;
box-shadow: 0 2px 7px #0AA7E5;
}
#main-header {
clear: both;
margin-left: 35%;
padding-bottom: 5%;
color: #414141;
}
nav {
text-align: center;
padding: 1% 0;
margin: 7% 5% 0 0;
float: right;
}
nav ul {
list-style: none;
}
nav li {
display: inline-block;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 1.5em;
margin-left: 5px;
}
nav li a {
text-decoration: none;
color: #545454;
}
nav li a:hover {
color: #0AA7E5;
}
.container {
display: block;
clear: both;
}
.container .even-height {
float: left;
}
#column-1 img {
display: block;
margin-left: auto;
margin-right: auto
}
#column-2 img {
display: block;
margin-left: auto;
margin-right: auto
}
#column-3 img {
display: block;
margin-left: auto;
margin-right: auto
}
h2 {
text-align: center;
}
#column-1{
width: 30%;
margin-left: 3%;
padding-bottom: 4%;
}
#column-2{
width: 30%;
padding-bottom: 4%;
}
#column-3 {
width: 30%;
float: left;
margin-right: 4%;
padding-bottom: 4%;
}
h2 {
font-family: 'PT Sans', sans-serif;
color: #606060;
}
p {
font-family: 'Raleway', sans-serif;
color: #606060;
}
footer {
clear: both;
padding-top: -30%;
height: 100%;
text-align: center;
background-color: #D3D3D3;
color: #545454;
box-shadow: 0 -2px 7px #0AA7E5;
}
footer p {
font-size: 20px;
padding-top: 40px;
padding-bottom: 40px;
}
footer p:hover {
color: #0AA7E5;
}
Phil White
Courses Plus Student 9,519 PointsThe site has two pages at the moment so the html ive given is the second page and the css is for the whole site
Don Howard
5,827 PointsOK, would you post your CSS code also?
Phil White
Courses Plus Student 9,519 Pointsthere you go posted, thanks for your help by the way
Don Howard
5,827 PointsI don't see a float property assigned to any of your images. Add a float: left; property to the image and to the text you want to work with.
Phil White
Courses Plus Student 9,519 PointsYeah i have tried that but i don't know how to target that specific image and text? ive tried using a div with a class and putting "class name img {}" if you know what i mean but not getting anywhere...
Don Howard
5,827 PointsThen make sure you don't have more than a combined 100% width assigned to the image and the text. You will need to factor margin and padding into that 100% as well. Place the item you want on the left into your html first, and the item you want on the right immediately following.
Hope that helps, Don
Phil White
Courses Plus Student 9,519 PointsWell i cant go over 100% because I'm using a grid and that adds up to 100%. and i don't understand what you mean immediately following? that's what I've done in my html... sorry if i'm being dumb lol
Don Howard
5,827 PointsThe only image classes I see in your CSS are set up as IDs, which means you can only use them once on each page. I would make those classes to begin with. Do that by prefacing with a . instead of a #.
Then target the photo you are working with by assigning the class to it.
Phil White
Courses Plus Student 9,519 Pointscan you post here where i have used a id because i cant see it?
Don Howard
5,827 PointsThese are all IDs:
```#column-1 img { display: block; margin-left: auto; margin-right: auto }
column-2 img {
display: block;
margin-left: auto;
margin-right: auto
}
column-3 img {
display: block;
margin-left: auto;
margin-right: auto
}
You could change them to classes like this:
```.column-1 img {
display: block;
margin-left: auto;
margin-right: auto
}
.column-2 img {
display: block;
margin-left: auto;
margin-right: auto
}
.column-3 img {
display: block;
margin-left: auto;
margin-right: auto
}
Don Howard
5,827 PointsIs it the header image and text you are working on?
Phil White
Courses Plus Student 9,519 Pointsno its the paragraph that has a class of grid-8 attached to it and the image with the class of grid 4
Phil White
Courses Plus Student 9,519 PointsI see what you mean now, no they are for my home page I'm trying to apply the css to my about page. the html i gave is the about page.
Don Howard
5,827 PointsI don't see any CSS set up for classes, or IDs, with the selectors of grid-8 or grid-4. To put a class in the html without having CSS properties for it will do nothing.
Don Howard
5,827 PointsAre you following the Web Design Track?
Phil White
Courses Plus Student 9,519 PointsThe grid selectors are on a separate file called grid.css here it is
.grid-1 {
width: 0%;
}
.grid-2 {
width: 6.5%;
}
.grid-3 {
width: 15%;
}
.grid-4 {
width: 23.5%;
}
.grid-5 {
width: 40.5%;
}
.grid-6 {
width: 49%;
}
.grid-7 {
width: 57.5%;
}
.grid-8 {
width: 66%;
}
.grid-9 {
width: 74.5%;
}
.grid-10 {
width: 83%;
}
.grid-11 {
width: 91.5%;
}
.grid-12 {
width: 100%;
}
Don Howard
5,827 PointsWhat track, or course, are you following?
Phil White
Courses Plus Student 9,519 PointsI'm not I'm trying to do it by myself
Don Howard
5,827 PointsThere are many issues with what you are trying to do and there is no way I could go over it all in this discussion. I would highly recommend selecting the Web Design Track and following it without adding anything, or skipping anything. You will be better equipped to take on your project. Without having the basics understood it becomes very difficult to take on these advanced projects.
Phil White
Courses Plus Student 9,519 PointsI've already done that track plus more, i know its something really simple but cant quite work it out. Can you tell me a few things I'm doing wrong so i can look into them rather than going back and doing something I've already done?
Don Howard
5,827 Points
Phil White
Courses Plus Student 9,519 PointsOkay thank you, i managed to solve it anyway.
Don Howard
5,827 PointsGreat! What was it that you found?
Phil White
Courses Plus Student 9,519 PointsI made 2 new id's and gave them new percentages and applied them to the text and the image
Don Howard
5,827 PointsGood, I hope some of this was helpful. That looks like a pretty ambitious project you are working on.
Phil White
Courses Plus Student 9,519 PointsYeah thank you appreciated. And yeah I'm trying to do it by my self because its all good following the tutorials but you wont really know it unless you challenge yourself and do it from memory.
Gareth Redfern
36,217 PointsHi Phil & Don, it looks like you managed to figure things out in the end. Phil, as well as posting your code if you could post a dev example using either workspaces or Codpen that can be very useful so that others can try and help debug things using the dev tools.
Layout can be one of the trickiest things to try and figure out. I know you said you have watched a lot of the videos but I highly recommend looking at the CSS layout course its short and quick to keep referencing. Also CSS Tricks has some great videos and write-ups.
One tip I use all the time is to add a outline to all my elements that I am trying to layout something like:
div, section, article { outline: 1px dashed red; }
What this does is start showing you how the box model is working and adding an outline doesn't effect the width of your element within the box model. You can also use different colours to try and easily display different elements. I hope that helps and let me know if you have any other questions.