Positioning with CSS

Report · Apr 05, 2017

Hello

I have read a number of similar questions but none seem to address my issue.

I cannot seem to move a div titled "rightside" to go there. I have used float:right but this does not work.

Another issue is that I have 3 small images with text that I want beneath a banner but again I cannot seem to position these either.

I am using an iMac with 32GB RAM and dreamweaver CS5.

Can anyone please help me with this?

HTML

<title> Ultimate Trumps | The home of intelligent and factual Trumps</title>

</head>

<body>

</div>

<p>Get more info about Trumps!</p>

<ul>

</ul>

</div>

<ul>

<li><a href="packs.html">Packs</a></li>

<li><a href="history.html">History</a></li>

<li><a href="aboutus.html">About</a></li>

<li><a href="contact.html">Contact</a></li>

</ul> </div>

</div>

<h1>Welcome to Ultimate Trumps</h1>

<p>Ultimate Trumps is a game of many benefits ranging from just a basic Trump game to a world of learning! Everyone will be able to learn something new even without playing the game. Real topics with real facts is what Ultimate Trumps prides its self upon.</p>

</div>

<h2>Fun for all the Family</h2>

<p>Ultimate Trumps is a game that the whole family can enjoy and learn something new from. With educational and intellgent topics even the smartest family member will discover a new fact. Ultimate Trumps is a game that is fun regardless of age. When immersed in a game of Trumps age does not matter! Try testing each other with statistics and see who has the best memory!</p>

</div>

<h2>An Educational Tool</h2>

<p>Ultimate Trumps can easily be used alongside the school curriculum or to help with a school project. Ultimate Trumps is an intelligent and fun way to remember information so you can dazzle your teachers or friends with a mountain of facts.</p>

</div>

<h2>Play and Learn</h2>

<p>We all know that when we play a game we learn something new. Sometimes the thing that we learn has little meaning but with Trumps from Ultimate Trumps, what you learn can help you succeed at school. Educational and factual topics mean that what you learn has a meaning and may aid you in exams and even quizzes!</p>

</div>

<h2>Sign up to our Newsletter and keep up to date with all things Trumps!</h2>

<h2>Ultimate Top Trumps</h2>

<p>Ultimate Top Trumps is your one stop for all things Trump related. The biggest site of its kind on the web, Ultimate Trumps has to be your first port of call for all collectors and fans.<br>Ultimate Trumps also buys collections so if your thinking of selling then get in contact with the team and see how they can help you.</p></div>

</script>

</div>

</body>

</html>

CSS

/*selector { property:value }*/

* { padding:0; margin:0; border:0;

font-size:12px; font-weight:normal; }

body { background-color:#66F; }

#wrapper { width:900px;

margin:5px auto;

padding:5px;

border:#FFF 1px solid;

background-color:#6FF; }

#banner { margin:1px;

padding:5px 40px;}

#logo-image { float:left;

padding:10px 0 0 30px;}

img { padding:5px; }

h1 { font-family:"Comic Sans MS", cursive;

font-size:24px;

text-align:center;

padding:10px; }

h2 { font-family:"Comic Sans MS", cursive;

font-size:18px;

padding:10px; }

p { font-family:"Comic Sans MS", cursive;

font-size:14px;

text-align:justify;

margin:5px 10px 5px 10px; }

ul li { display:inline;

list-style-type:none; }

a { font-family:"Comic Sans MS", cursive;

font-size:14px;

padding:0 24px 0 24px;

text-decoration:none; }

a:link { color:#000; }

a:visited { color:#03F }

a:active { color:#FF3; }

a:hover { color:#F00; }

a:focus { color:#F00; }

#nav {clear:both;

padding:0 0 15px 0; }

#nav { width:600px;

border-top:#FFF 1px solid;

padding:5px; }

#social { float:right;

padding:30px 0 0 10px;}

#social a { padding:1px;

text-decoration:none;

list-style-type:none; }

#social p { text-align:center;

padding: 0 0 10px 0; }

#content-wrapper {width:900px; }

#content { float:left;

width:620px; }

#content h2 {text-align:center;

padding:0 0 10px 0; }

#box1 { width:200px;

text-align:center; }

#box2 { width:200px;

text-align:center; }

#box3 { width:200px;

text-align:center; }

#rightside { float:right;

width:250px;}

#footer { padding:10px 0 10px 15px;

font-family:"Comic Sans MS", cursive;

width:400px; }

Thank you in advance!

Report · Apr 05, 2017

If you're looking to move it to the right of the "Welcome to Ultimate Trumps" title line. You'll need to move the <div id="rightside">...</div> higher up in your html, to just after the <div id="content">...</div>.

The code should look like this...

<h1>Welcome to Ultimate Trumps</h1>

<p>Ultimate Trumps is a game of many benefits ranging from just a basic Trump game to a world of learning! Everyone will be able to learn something new even without playing the game. Real topics with real facts is what Ultimate Trumps prides its self upon.</p>

</div>

<h2>Sign up to our Newsletter and keep up to date with all things Trumps!</h2>

<h2>Ultimate Top Trumps</h2>

<p>Ultimate Top Trumps is your one stop for all things Trump related. The biggest site of its kind on the web, Ultimate Trumps has to be your first port of call for all collectors and fans.<br>

Ultimate Trumps also buys collections so if your thinking of selling then get in contact with the team and see how they can help you.</p>

</div>

Report · Apr 05, 2017

Is this the layout you are aiming for?:

<!DOCTYPE html>

<html>

<head>

<title> Ultimate Trumps | The home of intelligent and factual Trumps</title>

<style>

* {

padding:0;

margin:0; border:0;

font-size:12px;

font-weight:normal;

}

body {

background-color:#66F;

}

#wrapper {

width:900px;

margin:5px auto;

padding:5px;

border:#FFF 1px solid;

background-color:#6FF;

background-color: yellow;

overflow: hidden;

}

#banner {

margin:1px;

padding:5px 40px;

}

#logo-image {

float:left;

padding:10px 0 0 30px;

}

img {

padding:5px;

}

h1 {

font-family:"Comic Sans MS", cursive;

font-size:24px;

text-align:center;

padding:10px; }

h2 {

font-family:"Comic Sans MS", cursive;

font-size:18px;

padding:10px; }

p {

font-family:"Comic Sans MS", cursive;

font-size:14px;

text-align:justify;

margin:5px 10px 5px 10px; }

ul li {

display:inline;

list-style-type:none;

}

a {

font-family:"Comic Sans MS", cursive;

font-size:14px;

padding:0 24px 0 24px;

text-decoration:none;

}

a:link {

color:#000;

}

a:visited {

color:#03F

}

a:active {

color:#FF3;

}

a:hover {

color:#F00;

}

a:focus {

color:#F00;

}

#nav {

clear:both;

padding:0 0 15px 0;

}

#nav {

width:600px;

border-top:#FFF 1px solid;

padding:5px;

}

#social {

float:right;

padding:30px 0 0 10px;

}

#social a {

padding:1px;

text-decoration:none;

list-style-type:none;

}

#social p {

text-align:center;

padding: 0 0 10px 0;

}

#content-wrapper {

width:900px;

}

#content {

float:left;

width:620px;

}

#content h2 {

text-align:center;

padding:0 0 10px 0;

}

#rightside {

float:right;

width:250px;

}

#footer {

padding:10px 0 10px 15px;

font-family:"Comic Sans MS", cursive;

width:400px;

}

#box_wrapper {

overflow: hidden;

}

#box1, #box2, #box3 {

float: left;

width: 33%;

}

</style>

</head>

<body>

</div>

<p>Get more info about Trumps!</p>

<ul>

</ul>

</div>

<ul>

<li><a href="packs.html">Packs</a></li>

<li><a href="history.html">History</a></li>

<li><a href="aboutus.html">About</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

</div>

</div>

<h2>Fun for all the Family</h2>

<p>Ultimate Trumps is a game that the whole family can enjoy and learn something new from. With educational and intellgent topics even the smartest family member will discover a new fact. Ultimate Trumps is a game that is fun regardless of age. When immersed in a game of Trumps age does not matter! Try testing each other with statistics and see who has the best memory!</p>

</div>

<h2>An Educational Tool</h2>

<p>Ultimate Trumps can easily be used alongside the school curriculum or to help with a school project. Ultimate Trumps is an intelligent and fun way to remember information so you can dazzle your teachers or friends with a mountain of facts.</p>

</div>

<h2>Play and Learn</h2>

<p>We all know that when we play a game we learn something new. Sometimes the thing that we learn has little meaning but with Trumps from Ultimate Trumps, what you learn can help you succeed at school. Educational and factual topics mean that what you learn has a meaning and may aid you in exams and even quizzes!</p>

</div>

</div>

<h1>Welcome to Ultimate Trumps</h1>

<p>Ultimate Trumps is a game of many benefits ranging from just a basic Trump game to a world of learning! Everyone will be able to learn something new even without playing the game. Real topics with real facts is what Ultimate Trumps prides its self upon.</p>

</div>

<h2>Sign up to our Newsletter and keep up to date with all things Trumps!</h2>

<h2>Ultimate Top Trumps</h2>

<p>Ultimate Top Trumps is your one stop for all things Trump related. The biggest site of its kind on the web, Ultimate Trumps has to be your first port of call for all collectors and fans.<br>Ultimate Trumps also buys collections so if your thinking of selling then get in contact with the team and see how they can help you.</p>

</div>

</div>

</div>

</body>

</html>

Report · Apr 05, 2017

Ah, thank you both!

2 mistakes in my code then!

Move the rightside div higher and also for simplicity add a "box-wrapper"!

MVP I suppose it would make life a lot easier to put in place the comments so that I know exactly where one thing starts and stops!

Thank you both for the help and advice!

Report · Apr 05, 2017

nigelh70638339 wrote
MVP I suppose it would make life a lot easier to put in place the comments so that I know exactly where one thing starts and stops!

You did begin to comment sections and then stopped, I just added the rest. Try and make it a habit as if your page code starts to get complex these comments really do help when troubleshooting.

nigelh70638339 wrote
Thank you both for the help and advice!

No problem, you're welcome.

Positioning with CSS

1 Correct answer