Can someone provide guidance on how to achieve the following layout:
I need a green container div that is 700 pixels wide. Inside this container, there should be a blue title area that spans the width of the green container with centered text for the title. Additionally, I want a red box to float on the right side without affecting the position of the text in the title.
How can I implement this design? I've attempted to float the red box to the right, but it seems to be shifting the text in the title to the left unexpectedly.
Edit - Just to clarify, I didn't provide an example initially because HTML and CSS are not my strongest areas, and I'm struggling to find a solution that doesn't misalign the text after trying various approaches suggested online. Here's a rough outline of what I was attempting: http://jsfiddle.net/3fgytw0u/
<!DOCTYPE html>
<head>
<title></title>
<style>
#Container {
width: 700px ;
margin-left: auto ;
margin-right: auto ;
}
#Title {
background-color: red;
text-align: center;
}
#GameGuidelines{
align:right;
width: 200px;
background-color: grey;
}
</style>
</head>
<body>
<div id="Container">
<div id="Title">
<h1>This</h1>
<h2>Is</h2>
<h2>A</h2>
<h2>Long</h2>
<h2>Title Title Title Title</h2>
</div>
<div id="GameGuidelines">
<ul>
<li>Some</li>
<li>Info</li>
<li>Here</li>
</ul>
</div>
<div id="Introduction">
<p>Rest of the page continues here</p>
</div>
</div>
</body>
</html>