For the past three hours been playing around with the CSS on my website. But, since I’m trying to make it more responsive, I’ve been having a problem. The sections aren’t aligning with each other (Even under the “standard view”). I’ve worked around with the position, clear, float, display… etc (practically everything!) and nothing has seemed to work. Maybe, you guys can give it a crack and see what I’ve been doing wrong / I messed up completely!
Kind regards!
Here is the current CSS I have applied (without media types) and it’s the closest to what I want done:
body {
font-family: Lucida Sans Unicode;
font-size: .8em;
color: #262626;
line-height: 1.3em;
margin: 0 auto;
background: #D0C4AF;
}
#content {
margin: 0 auto;
width: 960px;
background-color: #F1F0EC;
}
#container {
padding-top: 5em;
}
article#content {
width: 960px;;
margin: 0;
padding: 0;
display: inline;
}
article#content section.x {
width: 60em;
margin-right: auto;
margin-left: auto;
}
article#content section.y {
clear: right;
width: 20em;
margin-left: 8em;
float: left;
}
article#content section.z {
width: 40em;
margin-right: 5em;
float: left;
}
img.center {
margin-right: auto;
margin-left: auto;
padding: .7em;
padding-bottom: 2em;
}
And the HTML:
<body>
<div id="content">
<div id="container">
<article id="content">
<h2>Some Title</h2>
<section class="x">
<img src="pic.jpg" class="center"/>
<img src="pic.jpg" class="center"/>
<img src="pic.jpg" class="center"/>
<img src="pic.jpg" class="center"/>
</section>
<section class="y">
<h3>Left Section</h3>
<p>This part seems to work. It tends to be the right section which messes up the look of the webpage in the browser.</p>
</section>
<section class="z">
<h3>Right Section</h3>
<p>I'm not sure why or how but it's this section which causes the problems. Whether I change the float/position/... it sometimes never catches a-hold of everything. I'm probably overlooking something simple. Props to who can ever help! Thanks! :)</p>
</section>
</article>
</div>
</div>
</body>