CSS & images/Text

Ur_Mom

Ur_Mom

Fully [H]
Joined
May 15, 2006
Messages
20,648
Quick question, hopefully it's easy.

I am making a Wordpress theme. I originally had it at 1200px wide, but they want it to be dynamic (she uses a 1280 wide screen, I use a 1600 wide) and full screen.

My problem is that I have an image to the left, with text on the right. When I go to resize the screen to smaller resolutions, the text moves onto the picture, rather than the thing resizing.

Here is my code for the relevant part:

Code: 
<div>
<span style="float: left;  background: url('/wp-content/uploads/2015/08/home.jpg'); background-color: #FDF6B5; width: 100%; height: auto; background-repeat: no-repeat;">
<span style="float: right; width: 14%;">
<h2 style="text-align: left;"><b>OUR STRATEGY</b></h2>
<div style="text-align: left; font-size: 90%;">Lots of text goes here... And more ... And more... .</div>
</span>
</span>
</div>

Is there a way to get it to size correctly? I had the background color separate, but I want to be able to resize the image height without having the yellow background staying the same height...

Thanks!
 
Ok... Figured that out. No problem! A lot of trial and error, but I did some tricks....

Apparently, I didn't do them right, though.

I have two parts of the page. The part above (image, with a text box on the right).
Then, a separate area below that with other stuff. Now, I have them all together and the bottom part is behind the top part. I've tried clearing floats, but it stays back there...

Any ideas on how to make a new division between the top and the bottom?
 
Do you have any example code or screenshots of what's happening and what you want? It's just hard to get an idea of what you want unless you describe your goal a bit better.
 
Used floats instead of position: absolute....

Now, I'm out of alignment, but getting better....
 
If there's no other block elements there, you shouldn't need to clear the inner floats.
Just clear the outermost one, so that the rest of the page won't surround the bit you posted from the right.
You can apply a percentage width to an image to make sure it stays within the bigger box.
<b> is I believe deprecated in favour of <strong>
Position: absolute is usually bad
 
For layouts like this, you might consider using flexbox. You'll have two container divs. The container with the image should be styled to flex: 0 0 <whatever the image width is>, and the container with the text should be styled to flex: 1 1 auto. The parent of these two containers would be display: flex with justify-content: space-between.

Flexbox is a very modern approach to creating layouts, and it will be a lot more 'flexible' (pun intended) if you need to adjust your layout the future, such as adding a third panel.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 
Last edited:
Using flexbox is not advisable until it's part of the CSS final spec.Until that happens, browser support is minimal at best.
 
Snowknight26 said:
Using flexbox is not advisable until it's part of the CSS final spec.Until that happens, browser support is minimal at best.
Click to expand...

When's the last time you tried using flexbox? We track browser usage data and feature support matrixes very carefully where I work, and the OS + browser + browser version combinations that don't support the majority of flexbox (and can't be addressed with vendor prefixes) represent a statistically insignificant portion of our annual traffic.
 
You must log in or register to reply here.
Back
Top