Member Avatar for infotechland

Ok, I'm working in dreamweaver trying to redesign one of my websites. I would like to put my logo aligned to the left and my live chat image aligned to the right, but on the same line. How do I do this? I've tried messing with the div tags, adding, moving things around, nothing.

  • 3 Contributors
  • 4 Replies
  • 117 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Jaseva

Dani AI

Generated

A simple, robust solution is to wrap both images inside the same container and let CSS handle positioning. Modern CSS makes this trivial and avoids float-related issues that often confuse editors like Dreamweaver. As suggested, floats can work, but as hinted the container height and clearing matter — using a layout method that keeps both images in one flow is usually easier.

Example (minimal HTML + CSS):

<div class="topbar">
  <img src="logo.png" alt="Site logo" class="logo">
  <a href="/chat"><img src="chat.png" alt="Live chat" class="chat"></a>
</div>

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topbar img {
  max-height: 60px;
  height: auto;
}

Troubleshooting notes and Dreamweaver tips:

  • Make sure the two images and their wrapper are actually in the same parent element in Code view (Dreamweaver can sometimes insert extra containers in Design view).
  • If the images together are wider than the page/container, they will wrap to a new line — reduce image widths or increase the container.
  • Remove unexpected gaps by setting images to block-level inside their links (img { display: block; }) or by adjusting margins.
  • If supporting very old browsers, use a float or inline-block fallback and ensure the parent clears floats (for example with overflow: auto or a clearfix). For modern layouts prefer Flexbox — see MDN’s Flexbox guide for details: Flexbox guide. For float-clearing techniques see the micro clearfix discussion: Micro clearfix hack.

Recommended Answers

All 4 Replies

Member Avatar for Jaseva

I don't know how Dreamweaver works, but have you tried using the css float property? - logo to the left ( float: left ) and chat image to the right ( float: right )

Member Avatar for infotechland

Unfortunately I can't get that to work...where exactly would it and the images go? Is there any other way?

Member Avatar for ccube921

Well if your Div was the same height as the images, they would have to be on one line.

Member Avatar for Jaseva

Can you post the code for that part of your page? It would really help a lot.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.