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 Hayden Bradfield
Hayden Bradfield
1,797 Points

Having trouble...how can I get the image to float left within the far left column?

I have an image overlay I am trying to float on the left side of the left column (so the paragraph can wrap around it). When I float it left, the paragraph is hidden behind it. Why?

Here is my html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Home</title> <link rel="stylesheet" href="normalize.css" media="screen"> <link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="main.css" media="screen"> </head> <body> <div id="wrapper"> <nav id="nav"> <ul id="mainmenu"> <li><a href="index.html">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <header> <a href="index.html"> <h1>Hayden Bradfield</h1> <h1><small>Web Designer Student</small></h1> </a> </header> <div id="columns"> <section class="col"> <h2>Intro</h2> <p>This is a test page. This is a test page. This is a test page. This is a test page. This is a test page. This is a test page. This is a test page. This is a test page. This is a test page. This is a test page.</p> <div id="frogmc"> <div id="img-container"> <img src="frog.jpg" alt="frog on lilypad"> <div class="img-overlay"> <h3>Frog</h3> <p>This is a frog on a lilypad</p> </div> </div> </div> <p>This is a test page. This is a test page. This is a test page. This is a test page. This is a test page. This is a test page. This is a test page. This is a test page.</p> </section> <section class="col"> <h2>More Info</h2> <p>This is a test page. This is a test page. This is a test page. This is a test page. This is a test page.</p> </section> <section class="col"> <h2>Exciting News</h2> <p> Here is some exciting news!</p> </div> </div> <div id="foot"> <small>&copy Hayden Bradfield</small>

            </div>

</body>

</html>

Here is my CSS:

body { background-color:white; margin: 0% 0%; }

section { background-color:white; margin-top:0% 0%; padding-right:15px; height:100%; } header { background-color:#465E84; padding-top:40px; }

header h1 { margin: 0% 0%; text-align:center; padding-top:4px; padding-bottom:3px; font-family: 'Bungee Inline', cursive; }

header h1 small { font-family: 'Gloria Hallelujah', cursive; }

header a { text-decoration:none; color:white; }

header a h1:hover { color:red; transition-duration:0.5s; }

h2 { margin: 0% 0%; padding-top:0.5em; }

p { word-wrap:break-word; padding-bottom:0.5em; display:block; }

nav { background-color:#89cff0; margin: 0% 0%; text-align:center; position:fixed; width:100%; }

nav ul { margin: 0% 0%; padding-top:0.5em; padding-bottom:0.5em; list-style:none; padding-left:0px; }

nav ul li { display:inline; text-align:center; margin: 0% 0%; padding-left:4px; padding-right:4px; }

nav ul li a { text-align:center; margin: 0% 0%; text-decoration:none; color:#465E84; font-family: 'Fjalla One', sans-serif; }

nav ul li a:hover { color:white; }

p { margin: 0% 0%; }

foot {

margin: 0% 0%;
background-color:#465E84;
height:100%;
bottom:0;
position:relative;
text-align:center;
color:#89cff0;

}

wrapper {

min-height: calc(100vh - 18px);

}

img-container {

position:relative;
max-width:250px;
height:150px;
background-color:#999;
left:25%;

}

/* ======= Media Query ========== */

@media (min-width:200px) {

section h2 {
    padding-left:7px;
    padding-right:7px;
    font-size:18px;
}

p {
    padding-left:7px;
    padding-right:7px;
    font-size:15px;

}

}

@media (min-width:680px) {

section h2 {
    padding-left:20px;
    padding-right:20px;
    font-size:22px;
}

section p {
    padding-left:20px;
    padding-right:20px;
    font-size:18px;
}

#columns {
    display:flex;
}

.col {
    flex:1;
}

#frogmc {
    float:left;
}

}

/=======Frog Pic=========/

img-container {

position:relative;
max-width:250px;
height:150px;
background-color:#999;

}

img { position:absolute; max-width:250px; height:150; }

.img-overlay { opacity:0; position:absolute; color:white; top:0; height:150px; width:240px; background:rgba(0,0,0,0.5); opacity:50%; padding-left:10px; padding-right:0px; margin: 0px 0px; box-shadow:0px 0px 5px #FFF; transition-property:opacity; transition-duration:0.5s; text-align:center; }

.img-overlay:hover { opacity:1; }

2 Answers

Daniel Box
Daniel Box
1,939 Points
Daniel Box
Daniel Box
1,939 Points

By running your code through a validator at https://validator.w3.org. I was told the following:

Error: End tag div seen, but there were open elements. From line 1, column 1648; to line 1, column 1653 news!</p> </div> </div

Error: Unclosed element section. From line 1, column 1567; to line 1, column 1587 /section> <section class="col"> <h2>E

Error: Named character reference was not terminated by a semicolon. (Or & should have been escaped as &.) At line 1, column 1690 "> <small>&copy Hayden Bradfie

Sometimes your CSS is right and your HTML just needs a fixing. Using a Validator like the one above is a fast and very helpful way to check for errors.

Hayden Bradfield
Hayden Bradfield
1,797 Points

Ok, I fixed the html. But that still does not help me with the image issue I am having.

I have 3 columns set by the flexbox property. All three are even width.

However, when I go to insert the photo (that has animation features) in the far left column, I am having issues positioning it.

I am wanting it to float left where the paragraphs in the left column float around it. However, when I float it left, the image does not go into the desired spot and the paragraphs are hidden behind it.

Daniel Box
Daniel Box
1,939 Points
Daniel Box
Daniel Box
1,939 Points

Ok, this may not get you all of the way there but...

By setting the position of the image to absolute you take it out of the normal flow of the content. There for the id=frogmc element has no width. If image does not need it, remove absolute positioning. If it does you could set width and height of frogmc to that of the image.

Hope there is something helpful in there for you!

Hayden Bradfield
Hayden Bradfield
1,797 Points

When I removed the absolute positioning, it screwed my image overlay transition I have.

When you hovered over the image, a transparent screen with a description appeared over it.