Newbie question: how to align image inside a DIV?

HTML & CSS
1

Guys, I’m starting to learn HTML/CSS… I’m trying to put an image from drive inside a DIV on the right side of the page. The DIV itself is wider than the image and I want the image to be CENTERED inside the DIV “AD”…

How can I make it centered in both ways? Align doesn’t seem to work on the image…No matter if I use it in CSS (Style) nor HTML (BODY)… How do I make it in the middle of the grey frame? :frowning:

QUESTION 2: How do I copy-paste the code WITHOUT it being “converted” in these 2 tables etc? It skips the META, CODING etc… can I insert plane text?

TOP 5 MOVIES! 
<style>
#container
{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

#logo
{
	background-color: lightblue;
	color: red;
	text-align: center;
	padding: 10px;
}

#nav
{
	float: left;
	background-color: blue;
	width: 120px;
	min-height: 620px;
	padding: 10px;
}

#content
{
	float: left;
	width: 440px;
	padding: 20px;
}

#ad
{
	float: left;
	background-color: grey;
	width: 360px;
	min-height: 620px;
	padding: 10px;
}

#footer
{
	clear: both;
	background-color: red;
	padding: 10px;
	text-aling: center;
}


</style>

<div id="container">

	<div id="logo">
		<h1> TOP 5 MOVIES</h1>
	</div>
	
	<div id="nav">
		How I Met Your Mother </br>
		Prison Break </br>
	</div>
	
	<div id="content">
		<h2> How I Met Your Mother </h2>
		BLA BLA BLA.</br></br>
		BLAH BLAH BLAH.
	</div>
	
	<div id="ad">
		<img src="https://i1.wp.com/theonlineadvertisingguide.com/wp-content/uploads/2013/08/160X600.jpg?resize=160%2C600&ssl=1" />
	</div>
	
	<div id="footer">
		Best Movies - TOP 5! &copy; All Rights Reserved.
	</div>
</div>
2

text-align: center; should do the trick.

Slightly off-topic, since you’re learning, instead of

<div id="footer">
  ...
</div>

the modern approach would be to use

<footer>
  ...
</footer>
2 Likes
3

Thank you, I’m using quite old source in my lessons :slight_smile: I will correct that now and keep that in mind.

I’ve fixed the DIV and used the new FOOTER TAG… How do I define footer’s attributes now since the part from STYLE doesn’t work on it now? (since there’s no FOOTER DIV)?

1 Like
4

You refer to it without an initial dot.

footer {
  styles go here
}
1 Like
5

Man THANK YOU!

So do to it the MODERN WAY: I have deleted #footer and replaced it with

footer
{
clear: both;
background-color: red;
padding: 10px;
text-aling: center;
}

without the #, but still in the STYLE section, right after other DIVs… And it worked. Does it mean I did it the right, modern way now? :slight_smile:

PS. I did the same replacing Logo DIV with the HEADER and NAV :slight_smile:

And YES: TEXT-ALIGN did the trick, but normal ALIGN didn’t :open_mouth: Didn’t think it would be that easy heh, thank you again!

This is the current version:

TOP 5 MOVIES! 
<style>
#container
{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

header
{
	background-color: lightblue;
	color: red;
	text-align: center;
	padding: 10px;
}

nav
{
	float: left;
	background-color: blue;
	width: 120px;
	min-height: 620px;
	padding: 10px;
}

#content
{
	float: left;
	width: 440px;
	padding: 20px;
}

#ad
{
	float: left;
	text-align: center;
	background-color: grey;
	width: 360px;
	min-height: 620px;
	padding: 10px;
}

footer
{
		clear: both;
		background-color: red;
		padding: 10px;
		text-aling: center;
}


</style>

<div id="container">

	<header>
		<h1> TOP 5 MOVIES</h1>
	</header>
	
	<nav>
		How I Met Your Mother </br>
		Prison Break </br>
	</nav>
	
	<div id="content">
		<h2> How I Met Your Mother </h2>
		BLA BLA BLA.</br></br>
		BLAH BLAH BLAH.
	</div>
	
	<div id="ad">
		<img src="https://i1.wp.com/theonlineadvertisingguide.com/wp-content/uploads/2013/08/160X600.jpg?resize=160%2C600&ssl=1" />
	</div>
	
	<footer>
		Best Movies - TOP 5! &copy; All Rights Reserved.
	</footer>
	
</div>
6

Pretty much.

(Yes, when I said without the dot, I should have said without the # - but you spotted my deliberate :slight_smile: error!

The only other thing I would suggest, for reasons that someone else will need to explain (as my explanations usually miss out vital info), would be to use classes rather than ids (and therefore dots instead of #s).

1 Like
7

I’ll look into those classes later, thank you again :slight_smile: I already feel better about my coding skills ROFL…

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.