Arranging two DIVs side by side

I am struggling with positioning a promo image next to a dropdown menu, which consists of several DIVs. Currently, the image is displaying below the menu due to using inline-block and block properties in the CSS styles.

 .menu{
    background-color: white;
    color: #707070;
    height: 50px;
    width: 200px;
    cursor: pointer;
    border: 1px solid;
    text-align: middle;
    margin-left: 13px;
    margin-top: 30px;
    display: block;
    }
    
    .collapsible {
    background-color: white;
    display: block;
    color: #707070;
    height: 50px;
    width: 200px;
    cursor: pointer;
    border: 1px solid;
    text-align: middle;
    margin-left: 13px;
    }
    
    .content {
    display: none;
    text-align: center;
    overflow: hidden;
    background-color: white;
    color: #707070;
    height: 50px;
    width: 200px;
    cursor: pointer;
    margin-left: 13px;
    }
    
    .advert{
    height: 240px;
    width: 800px;
    margin-left: 500px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    float: top;
    }
<div>
    <button class="menu">MENU</button>
    <button class="collapsible">Categories &#x2BC6;</button>
    <div class="content">
    <p>1</p>
    </div>
    <button class="collapsible">Information &#x2BC6;</button>
    <div class="content">
    <p>2</p>
    </div>
    <button class="collapsible">Contact Us &#x2BC6;</button>
    <div class="content">
    <p>3</p>
    </div>
    <button class="collapsible">Follow Us &#x2BC6;</button>
    <div class="content">
    <p>4</p>
    </div>
    </div>

    <div>
    <img src="img/promo_image.png" class="advert">
    </div>

Further elaboration provided to prevent any misunderstanding.

htmlcss

Answer №1

Incorporating a horizontal layout using inline flex for the div.

.inline-flex{
  display: inline-flex;
}

.menu{
    background-color: white;
    color: #707070;
    height: 50px;
    width: 200px;
    cursor: pointer;
    border: 1px solid;
    text-align: middle;
    margin-left: 13px;
    /* margin-top: 30px; */
    display: block;
    }

.collapsible {
    background-color: white;
    display: block;
    color: #707070;
    height: 50px;
    width: 200px;
    cursor: pointer;
    border: 1px solid;
    text-align: middle;
    margin-left: 13px;
}

.content {
    display: none;
    text-align: center;
    overflow: hidden;
    background-color: white;
    color: #707070;
    height: 50px;
    width: 200px;
    cursor: pointer;
    margin-left: 13px;
}

.advert{
    height: 240px;
    width: 800px;
    margin-left: 500px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    float: top;
}
<div class="inline-flex">
<button class="menu">MENU</button>
    <button class="collapsible">Categories &#x2BC6;</button>
        <div class="content">
            <p>1</p>
        </div>
    <button class="collapsible">Information &#x2BC6;</button>
        <div class="content">
            <p>2</p>
        </div>
    <button class="collapsible">Contact Us &#x2BC6;</button>
        <div class="content">
            <p>3</p>
        </div>
    <button class="collapsible">Follow Us &#x2BC6;</button>
        <div class="content">
            <p>4</p>
        </div>
</div>

<div>
<img src="img/promo_image.png" class="advert">
</div>

Answer №2

From my understanding, there is no such thing as float: top in CSS. There are various ways to achieve what you're looking for. For instance, you can set the advertisements' position to absolute:

.menu {
  background-color: white;
  color: #707070;
  height: 50px;
  width: 200px;
  cursor: pointer;
  border: 1px solid;
  text-align: middle;
  margin-left: 13px;
  margin-top: 30px;
  display: block;
}

.collapsible {
  background-color: white;
  display: block;
  color: #707070;
  height: 50px;
  width: 200px;
  cursor: pointer;
  border: 1px solid;
  text-align: middle;
  margin-left: 13px;
}

.content {
  display: none;
  text-align: center;
  overflow: hidden;
  background-color: white;
  color: #707070;
  height: 50px;
  width: 200px;
  cursor: pointer;
  margin-left: 13px;
}

.advert {
  height: 240px;
  width: 800px;
  position: absolute;
  top: 30px;
  left: 230px;
}
<div>
  <button class="menu">MENU</button>
  <button class="collapsible">Categories &#x2BC6;</button>
  <div class="content">
    <p>1</p>
  </div>
  <button class="collapsible">Information &#x2BC6;</button>
  <div class="content">
    <p>2</p>
  </div>
  <button class="collapsible">Contact Us &#x2BC6;</button>
  <div class="content">
    <p>3</p>
  </div>
  <button class="collapsible">Follow Us &#x2BC6;</button>
  <div class="content">
    <p>4</p>
  </div>
</div>

<div>
  <img src="img/promo_image.png" class="advert">
</div>

However, I recommend using CSS grid or flexbox. Here's an example with CSS Grid:

.grid {
  display: grid;
  grid-template-columns: 213px 1fr;
  width: 100%;
}

.menu{
    background-color: white;
    color: #707070;
    height: 50px;
    width: 200px;
    cursor: pointer;
    border: 1px solid;
    text-align: middle;
    margin-left: 13px;
    display: block;
}

.collapsible {
    background-color: white;
    display: block;
    color: #707070;
    height: 50px;
    width: 200px;
    cursor: pointer;
    border: 1px solid;
    text-align: middle;
    margin-left: 13px;
}

.content {
    display: none;
    text-align: center;
    overflow: hidden;
    background-color: white;
    color: #707070;
    height: 50px;
    width: 200px;
    cursor: pointer;
    margin-left: 13px;
}

.advert{
    height: 240px;
    width: 800px;
    margin-left: 500px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    float: top;
}
<div class="grid">
<div>
<button class="menu">MENU</button>
    <button class="collapsible">Categories &#x2BC6;</button>
        <div class="content">
            <p>1</p>
        </div>
    <button class="collapsible">Information &#x2BC6;</button>
        <div class="content">
            <p>2</p>
        </div>
    <button class="collapsible">Contact Us &#x2BC6;</button>
        <div class="content">
            <p>3</p>
        </div>
    <button class="collapsible">Follow Us &#x2BC6;</button>
        <div class="content">
            <p>4</p>
        </div>
</div>

<div>
<img src="img/promo_image.png" class="advert">
</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on how to maintain the value of an integer variable even after clicking a submit button, enabling its reuse on the same page

Take a look at the first part of this code where we are using the variable $Tno. if(isset($_POST['submit'])) { $Tno=$_POST['Tno']; $query="SELECT * FROM docs WHERE Tno='$Tno'"; $result=mysql_query($query) or di ...

phphtmlmysqlpdf

What is the best way to show an error message on a webpage using jQuery within a PHP environment?

I have a form in HTML that includes a submit button for posting status on a page. When a user clicks the submit button without entering anything into the form field, I want PHP to display a simple error message on the same page saying "This status update s ...

javascriptphpjqueryhtmlcss

Optimal approach for reutilizing Javascript functions

After creating a simple quiz question using jQuery, involving show/hide, addClass, and tracking attempts, I am now considering how to replicate the same code for multiple questions. Would it be best practice to modify all variables in both HTML and jQuery, ...

javascriptjqueryhtmlcsslayout

Utilizing Playframework in Scala to Connect a List/Sequence to the Controller

I am struggling to connect a list of input items on my webpage to my controller. This is how my form is defined: def clientForm = Form( tuple( "clients[]" -> seq( tuple( "firstname" -> text, "lastname" -> text) ) ) ...

htmlscalalistplayframework

Hovering over a class list will modify various element IDs

Is there a way to change the height of an element with id = "header_nav" when hovering over the class "header_nav" li element? Here is the HTML Code: <div class="header_nav" id="header_nav"> <ul id="header_nav_mainmenu"> & ...

htmlcssclasshover

Steps for dynamically loading the correct pane without having to refresh the header, footer, or left navigation

Looking to create a web application using HTML, Bootstrap, and jQuery that includes a header, footer, left navigation, and right pane. The content of the right pane will be loaded from a separate HTML page based on what is clicked in the left navigation. ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Utilizing jQuery for animating SVG elements with dynamic color changes and scaling effects upon hover

Seeking assistance from coding experts! I have created an icon and am attempting to modify it so that the color changes when hovered over. Additionally, I want the white square to scale down by 50% starting from the top-left corner of its current position. ...

javascriptjqueryhtmlcsssvg

Using HTML and CSS to create a line break between div elements

Currently, I am working on a page that allows users to post comments. However, I have encountered an issue with the div element that contains the posted message. When the message is too long and lacks line breaks, a horizontal scrollbar appears. I would li ...

asp.nethtmlcss

How to completely color a div in CSS

<h:head> <title>Unique Title</title> <style> .top{ margin: 0; padding: 0; background-color: blue; height: 15px; width: max-content; } </style ...

htmlcss

Introducing a new div element completely disrupts the overall layout

Take a look at the code I have provided below. http://jsfiddle.net/xymgwonu/3/ Everything was working perfectly fine until I introduced a new div with the class name <div class="bubble"></div>. This caused some issues with the overall design. ...

htmlcssbootstrap-4

Ways to add gaps between flexbox items within a single row?

I have a coding dilemma where I am trying to display two items in the same row with a 12px gap between them, but my current method is not working as desired. I want there to be space between the A's and B's without resorting to traditional techni ...

htmlcssflexbox

The jQuery bookmarklet in the djangobyexample book is completely unresponsive

As I work my way through Django By Example, I came across a chapter where a jQuery bookmarklet is created within a Django app. This allows users to easily save jpg images from websites into their user profile area within the Django app. Although the tutor ...

javascriptjquerypythonhtmldjango

A guide on transforming a 1-dimensional array into a 2-dimensional matrix layout using Angular

My query revolves around utilizing Template (HTML) within Angular. I am looking for a way to dynamically display an array of objects without permanently converting it. The array consists of objects. kpi: { value: string; header: string; footer: string }[] ...

htmlangulartypescript

Displaying an array value instead of a new value list in a React component

Situation - Initial number input in text field - 1 List of Items - 1 6 11 Upon removing 1 from the text field, the list becomes - New List Items - NaN NaN NaN Now, if you input 4 in the field. The updated List Items are - NaN NaN 4 9 14 Expected ...

javascripthtmlcssreactjsreact-usecallback

Query the MySql database with PHP to locate an HTML hyperlink

I am working with a mysql table which has item_id and link columns where the link column contains both html tags and actual links. I need to search the database for a link that does not contain any html tags. What is the most efficient way to achieve thi ...

phpmysqlhtml

What is the best way to include an active item within an li tag inside a div container?

Here is the structure for a widget that I have, and I want to add the active class to the li. I've tried doing this but it's not working and I'm unsure where the issue lies. var selector = '#recent-posts-5'; var url = window. ...

htmljquery

The CSS selector seems to be malfunctioning

I am facing an issue with calling HTML elements from CSS using CSS selectors. It's strange that the class selectors work fine, but I'm unable to select the elements directly from CSS. Therefore, I had to assign them classes. What I aim to achiev ...

htmlcsscss-selectors

What are the steps to ensure a form does not trigger the action URL and instead only prints the data upon submission

Currently, I am working on creating a form that will submit without opening the action URL when a button is clicked. Additionally, after submission, I want to display a message and clear the form. Can anyone guide me on how to achieve this? <form id="c ...

javascriptphphtmlforms

Running a <script> tag with an external src attribute in a dynamic manner through the use of eval

Currently, I am utilizing the Genius API to fetch lyrics for a particular song and then embed them within an HTML <div> tag. My interaction with this API is through PHP, employing an AJAX GET request. Upon a successful AJAX request, the following HT ...

javascriptphpjqueryhtmlajax

Vuetify's offset feature seems to be malfunctioning as it does not

I'm facing an issue with the <v-flex> element in my code, specifically with the offset property not responding as expected. Despite following the recommended layout from the vuetify docs, I can't seem to get it right. Below you can see the ...

htmlcssvue.jsflexboxvuetify.js