4 replies [Last post]
katamail
katamail's picture
Offline
newbie
Last seen: 5 years 35 weeks ago
Timezone: GMT+2
Joined: 2014-09-25
Posts: 10
Points: 12

I want those two "container" to be side by side. The div is a star rating widget and the img is a print button link image. I can't really figure out what needs to be done with the alignment. I have try by adding h6 value to the image and position with CSS in the right spot on the website..problem is that when I post a longer text on one of the pages the image doesn't follow at the bottom of the text, it will however stay at the bottom of the text if I disable the CSS code.

Here is my HTML:

<h6><img src="print.png" onclick="PrintMe('divid')"/></h6>                                               
 
<div id="14114144684885" class="wE"><script src="http://widget-engine.com/w:0:003:14114144684885:3:000:40" type="text/javascript"></script></div>

Here the CSS code:

h6 {
    position: absolute;
    left: 460px;
    top:  980px;
}

Both img and div will follow down with text if I don't use CSS code but they will be one over another, even adding -align right- to img whould not really work, img goes right but still is always over the div.

Is the a way to have them side by side?

Thank you in advance
Max

AttachmentSize
printscreen.JPG24.82 KB
katamail
katamail's picture
Offline
newbie
Last seen: 5 years 35 weeks ago
Timezone: GMT+2
Joined: 2014-09-25
Posts: 10
Points: 12

Half way solved..

I did hopefully solve the problem by changing from absolute to relative, now however there is something wrong with the button, I can only click around the button-image but not on the button-image itself ..

What I'm doing wrong?

HTML:

<h6><img src="print.png" onclick="PrintMe('divid')"/></h6>

CSS:

h6 {
    position: relative;
    left: 60px;
    top:  30px;
}

Cheers
Max

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 4 hours 47 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9757
Points: 3839

First things first

Forget you ever heard of "position: absolute;". It is a powerful property with equally powerful teeth with which to bite your butt. Further, it is nearly always the least appropriate means of laying out a page.

In the case, a simple method is

<h6>...</h6>
<div>...</div>
==========
h6 {
  float: left;
  }
 
div {
  overflow: hidden; /*prevents the div's content from 
                      wrapping around the h6*/
  }

I think, that your knowledge base is too small. see the tutorials at htmldog. It also appears you're choosing your heading based on how it looks instead of its structural position. See the thread on heading use for info.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 4 hours 47 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9757
Points: 3839

You posted while I was writing

Let me emphasize; avoid the position property until you've achieved intermediate level understanding of css, at the least.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

katamail
katamail's picture
Offline
newbie
Last seen: 5 years 35 weeks ago
Timezone: GMT+2
Joined: 2014-09-25
Posts: 10
Points: 12

All true

Yes it is all true, I'm a beginner thats why I posted under "Beginner CSS questions" My story with CSS started around a month ago when I decided to make a website for cake recipes, I've work long time ago with simple HTML and that is how I started a month ago just to realize that simple HTML is not enough in the internet world of today, so, I downloaded a free web template with CSS and HTML, lots of confusion really, I couldn't understand a thing..after much googling, tutorials etc my CSS knowledge is still very limited, BUT I'm learning things, I was able after a month to set up a quite nice website, all the original template, pics, contents are gone, and is replaced with my own material, new HTML code added, some CSS code added as well and more to come I hope.

So, yes I'm trying to understand, CSS is not easy but things goes clear day by day.

I thank you for all your help and I wish you all the best.

Regards
Max