Change Placement of Image and Text In Header

[Jennnnn]

I want to change the placement of the image and text in my site's header. I currently have a centered image with text (on three different lines and styled by different classes) centered below.

I want to rearrange the above items so the image is just left of the header's center and the text is just right of the center (with each line of text left justified) so the image and text are next to each other.

I tried creating two div's, one for the image and one for the text, but the result wasn't close to what I want. How can I do this? Thanks for your help!


Current CSS:
#logo {
padding: 23px 0;
margin: 0 auto;
text-align: center;
}


Current HTML:
<div id="logo">
<span class= "color1text">
<a href="../example.html" title="example">
<img alt="example" src="../example" title=" example"></a><br>text1</span><span class= "color2text"> text2</span>
<p class= "color3text">text3</p>
<p class= "color4text">text4</p>
</div>
</div>

[not2easy]

You've only styled the div that contains the image and the text spans. The spans containing the image and the text have no style properties. The span classes

color1text, color2text, color3text and color4text

are not defined so this:

text-align: center;

makes everything center-aligned.

The properties for each class need to be specified, preferably with each in a div element because span tags have no default properties. Try putting

<span class= "color1text">
<a href="../example.html" title="example">
<img alt="example" src="../example" title=" example"></a><br>text1
</span>

within its own div tag with a class to set the properties you want it to have.

[Jennnnn]

I'm sorry, I don't understand. I'm a beginner. I've made some changes. This is what I have now:

CSS

#logo {
margin: 0 auto;
text-align: center;
}
.logoBox2a {width: 48%; margin: 0 2% 0 0; text-align: right; padding: 20px 0 0 0;
}
.logoBox2b {width: 48%; margin: 0 0 0 2%; text-align: left; padding: 0 0 20px 0;
}
.greentext {
font: normal 38px Impact, Verdana, sans-serif;
color: #accb4d;
letter-spacing: 2px;
text-decoration: none;
margin: 0; padding: 0;
}
.bluetext {
font: normal 38px Impact, Verdana, sans-serif;
color: #32afe6;
letter-spacing: 2px;
text-decoration: none;
margin: 0; padding: 0;
}
.whitetext {
font: normal 16px Arial Black, Helvetica, sans-serif;
font-weight: 200;
color: #eee;
margin: 0; padding: 1px 0 0 0;
letter-spacing: 2px;
}
.bluetextsm {
font: 21px Arial Black, Verdana, Helvetica, sans-serif;
color: #32afe6;
letter-spacing: 1px;
text-decoration: none;
margin: 0; padding: 0 0 0 0;
font-weight: bold;
}


HTML

<div id="logo">
<div class= "logoBox2a">
<img alt="example" src="../example">
</div>
<div class= "logoBox2b">
<span class= "greentext">
text1</span><span class= "bluetext"> text2</span>
<p class= "whitetext">text3</p>
<p class= "bluetextsm">text4 </p>
</div>
</div>

What I see is two div's that are stacked rather than being side-by-side. The first div (containing image) is correctly placed but the second div (containing text) is underneath and to the far left instead of being just right of the image.

This is what I want centered on the header (* indicates header center)

image*text1 text2
*text3
*text4

Thanks for your help!

[NickMNS]

use flexbox
[w3schools.com...]

[tangor]

Keep it simple. Note, this is not "code", merely shorthand

div center
 div width % left image float right /div
 div width % right text left /div
 text
 text
/div

Could also use table cells to achieve same effect

[NickMNS]

Using float is never simple.

[lucy24]

Using float is never simple.

It would be perfectly simple if people would only stop misusing it by trying to float two elements next to each other, as if it were synonymous with {display: inline-block} *. It's perfectly straightforward so long as you recognize that floating is a one-way hierarchical relationship of A to B, not reciprocal between A and B.

* I think some designers came of age during the period when That Browser refused to do inline-block except in situations where nobody would ever try to use it in the first place, forcing them to learn bad habits. But that is now happily in the past.

[tangor]

float is useful for placement, but like lucy24 indicates, too often folks don't use it properly.

as suggested the result is:

image--><--text with both divs centered with two lines below, also centered, regardless of res/zoom.

As for OP, if you want this to be more responsive regardless of device or screen res, the image lives in a div of its own with a max-width value of 100% height auto and the "logo" text is in a div of it's own. The two lines below live in the containing center div.

As this is likely for all pages, should be an include. All css in that file is coded once and not placed in the main.css UNLESS it is reusable for other parts of the page presentation. Sometimes we get too clever and bloat up a css file for a one trick pony (a logo header).

[Jennnnn]

After making adjustments I was able to get close to the desired look but in the process I became concerned that the new arrangement wouldn't work well for small devices because of the increased width so I decided to keep the current centered design. Thanks for all your help!

[NickMNS]

Using flexbox would allow you to get things to look exactly as you would like on large screens and then allow you to re-adjust the elements so that they look good on a small screen (eg: in stacked column, for example). I strongly suggest that you take the time to look at it, it was designed specifically for your use case.

[Jennnnn]

I will. Thanks!

[JonathanEdmonton]

I did not know about flexbox. Thanks NickMNS

[lucy24]

Be sure to test your site on, er, That Browser.* I just checked caniuse dot com.


* By amazing coincidence.