Float problem

[techyworld]

Hi I am currently having an issue. I have two div tags, and the elements of the div tags should be aligned on the same line. (1 image + text +1 image). My problem is the 3rd element , that is the image , in order for it to appear i use float right. so it should be on the extreme right of the screen.The application run well on my screen size and the image is in the complete right corner. But when I tried to run the application on a larger screen, it do work but it leaves a blank margin on the extreme right. The image is not exactly in right corner of the screen. How do i solve this issue, that is to cater for different size of screen?

Below are the codes:

` #header{width:60%; float:left; margin-bottom:10px;
background: transparent url(‘../images/l.png’) no-repeat;}

#subHead{  width:40%; float:right; margin-bottom:10px; height:55px; background: transparent url('../images/flag.png')  no-repeat;}`

`

`

[Paulie_D]

Isn’t this the same as this post here: https://css-tricks.com/forums/topic/problem-placing-2-images-and-1-text-on-same-line/

As I said, we need to see a Codepen or a link.

[techyworld]

wat do you mean by codepen? no it’s not the same

[Paulie_D]

Unless we can see what you have in place (do you have a link) it’s hard to offer suggestions…we don’t know image sizes or div heights for instance.

Codepen is a online coding platform (like jsFiddle) where you can demo and share your code if you don’t have a link.

Here’s a video: https://css-tricks.com/video-screencasts/112-using-codepen/

Just remember if you want images to show on Codepen etc you’ll have to have them on a webserver somewhere and link them appropriately.

I’ll open the other discussion which looks very much the same…perhaps the solutions will be the same for both.

[Author]

Posts