Hey there, I'm still trying to get the hang of CSS and using Dreamweaver CS6's fluid grid layout. In my attempt to create a header with two divs inside it - headerleft for an image and headerright for text - I've run into some alignment issues. My main goal is to keep the text in line with the center of the image even when resizing due to the fluid layout.
I thought placing the headers within a container div would help me align them easily, but I'm struggling to make it work. Here's the code snippet I currently have for this part of the page:
EDIT: Updated Code (still not working):
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 90.5666%;
padding-left: 0.2166%;
padding-right: 0.2166%;
}
#headercontainer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
text-align: left;
}
#headerleft {
clear: both;
float: left;
margin-left: 0;
width: 49.7607%;
}
#headerright {
clear: none;
margin-left: 0.4784%;
width: 49.7607%;
}
Here's how the HTML looks:
<div class="gridContainer clearfix">
<div id="headercontainer">
<div id="headerright">
<h2>Support For All Your Gadgets & Tech!</h2>
</div>
<div id="headerleft"><h2><img src="images/logo2.png" alt="alt" longdesc="desc"></h2>
</div>
</div>
Any suggestions or assistance would be greatly appreciated. Thank you!