Member Avatar for chrisschristou

hello daniweb friends.
sorry for my title i didn't find how tell shortly or exact my problem. so i have a div in header which in i have image as site logo and near i have form "search form" i want to make near, face to face. but what i get here the form goes under the image i have no idea how to do i have made form fly left.. but still it is under the image

<div id="menu2" class="header"><a href="#"><img src="../images/logocnc.png" alt="" name="" width="260" height="98" id="Insert_logo" style="background-color: #009EC2; display:block;" /></a><form class="form-wrapper cf" action="../resultat.php" method="post">
        <input type="text" id="searchword" name="searchword" placeholder="Search here..." required>
        <button type="submit">Search</button>
    </form> 
  </div>
  • 2 Contributors
  • 3 Replies
  • 227 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by rtrethewey

Dani AI

Generated

Brief summary and a clean, modern fix: the layout is collapsing because the logo is being treated in a way that forces the form onto the next line. ’s float/margin suggestion will work, but fixed margins and floats are brittle for responsive designs. A simpler, more robust approach is to make the header a flexible row and let the logo and form size themselves. That avoids hard-coded pixel offsets and keeps the search field usable on narrow screens.

Example (keeps markup minimal and uses CSS flexbox):

<header class="header-flex">
  <a class="logo" href="#"><img src="../images/logocnc.png" alt="site logo"></a>
  <form class="search" action="../resultat.php" method="post">
    <input type="text" name="searchword" placeholder="Search here..." required>
    <button type="submit">Search</button>
  </form>
</header>
.header-flex { display:flex; align-items:center; gap:1rem; padding:.5rem; }
.header-flex .logo img { max-width:260px; width:100%; height:auto; display:block; }
.header-flex .search { margin-left:auto; display:flex; gap:.5rem; align-items:center; }
.header-flex .search input { min-width:140px; max-width:40vw; box-sizing:border-box; }
@media (max-width:600px){
  .header-flex { flex-direction:column; align-items:stretch; }
  .header-flex .search { margin-left:0; width:100%; }
  .header-flex .search input { width:100%; }
}

Practical notes and troubleshooting:

  • Remove inline layout styles on the image or anchor (they override external CSS).
  • Use max-width:100% / height:auto for the image so it scales; avoid hard pixel margins for layout.
  • margin-left:auto pushes the form to the right without brittle offsets.
  • If supporting very old browsers, fall back to inline-block or floats, but prefer flexbox for maintainability.
  • Use browser devtools to inspect computed widths and find any remaining inline or high-specificity rules that keep the form under the logo.

This keeps the logo readable, the search usable on small screens, and avoids hacks like fixed pixel margins or clearing elements.

Recommended Answers

All 3 Replies

Member Avatar for rtrethewey

You have the <img> set to "display:block", so the browser allocates the full width of its containing element (the <div class="header">) to display it. Then the next block-level element (the <form>) must start at the far left of the next new line. If you want these two elements to be at roughly the same vertical position on the same line, there are several ways to do it.

The simplest would be to remove the "display:block" from the <img> tag, and then move the entire <a href="#">...</a> code to come just after the <form> tag. This is a quick fix and not the best way.

It would be better to set the <a href="#"> to "float:left;" and add "margin-left:266px;" to the <form> tag, and add a <br style="clear:left"> after the </form> tag. Then you can adjust both the <img> and the <form> more efficiently.

The best solution is going to depend on the entire layout of the page, but this should get you started.

Member Avatar for chrisschristou

i'm trying to set the second way but it look hard and nothing change with this code

<img src="../images/logocnc.png" alt="CNCMOB.COM" name="CNCMOB.COM" width="260" height="98" id="Insert_logo" style="background-color: #009EC2; display:block; margin-left:266px" /> <br clear="left"></a><form class="form-wrapper cf" action="../resultat.php" method="post">
        <input type="text" id="searchword" name="searchword" placeholder="Search here..." required>
        <button type="submit">Search</button>
    </form>

and i use % on my website i'm trying to make it responsive
this is what it done
1c17af39890ce7fa51f40d336acde2ad1c17af39890ce7fa51f40d336acde2ad1c17af39890ce7fa51f40d336acde2ad1c17af39890ce7fa51f40d336acde2ad

Member Avatar for rtrethewey

Try:

<div id="menu2" class="header">
<a href="#" style="float:left; display:block;"><img src="../images/logocnc.png" alt="" name="" width="260" height="98" id="Insert_logo" style="background-color: #009EC2;" /></a>
<form class="form-wrapper cf" action="../resultat.php" method="post" style="margin-left:264px;">
<input type="text" id="searchword" name="searchword" placeholder="Search here..." required>
<button type="submit">Search</button>
</form>
<br style="clear:left;" />
</div>
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.