positionement problem of an image and near a form

[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>

[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.

[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

[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>