Tips for showing two divs alongside p tags in a single row

Is there a way to align two divs side by side on the same line, despite both having p tags and one containing an image that is necessary? I appreciate any workaround suggestions. Thank you!

Here is the code snippet:

HTML

<div class="MainMenu">
        <a href="home.php"><p>HOME</p></a>
        <a href="#"><p>ABOUT</p></a>
        <a href="store.php"><p>STORE</p></a>        
    </div>

    <div class="MainMenuBasket">
        <img src="../Images/jigsoar-icons/PNG/light/64px/64_cart.png" width="px" height="px" />

        <a href="#"><p>BASKET</p></a>
    </div>

CSS

.MainMenu{width: 680px; float: left; margin-top:25px;}
.MainMenu a{text-decoration: none; color: #FFF; }
.MainMenu a:link {color: #FFF; text-decoration: none;}
.MainMenu a:active {color: #; text-decoration: none;}
.MainMenu a:hover {background-color: #7D3B05; text-decoration: none;}
.MainMenu a:visited {color: #; text-decoration: none;}
.MainMenu p{display: inline; font-size: 18px; padding-left: 20px;}

.MainMenuBasket{float: left; margin-top:25px;}
.MainMenuBasket a{text-decoration:none; color: #FFF;}
.MainMenuBasket a:link {color: #FFF; text-decoration: none;}
.MainMenuBasket a:active {text-decoration: none;}
.MainMenuBasket a:hover {background-color: #7D3B05; text-decoration: none;}
.MainMenuBasket a:visited {text-decoration: none;}
.MainMenuBasket p {display: inline; font-size: 18px;  padding left: 20px;}
csshtmlimage

Answer №1

To adjust the width of the .NavigationMenu

.NavigationMenu {
    float: left;
    margin-top: 30px;
    width: 200px;
}

Example in Action: http://jsfiddle.net/po876/4/

Answer №2

To make .MainMenuBasket align properly on the right, add the attributes "position:absolute" and "float:right". Experiment with adjusting the "left" attribute of this class.

For future reference, consider utilizing the CSS library Bootstrap at . It offers a simple way to create divs like this one.

Answer №3

If you desire to have both div elements appear on the same line, then you must assign a float:left property to the first div and float:right to the second div.

Here is a sample code snippet to achieve this effect:

.MainMenuBasket{float: right; margin-top:25px;}

Answer №4

Replace the width property with display:table-cell in the styling of the element with class .MainMenu. Also, eliminate the float:left from the element with class .MainMenuBasket

.MainMenu{display:table-cell; margin-top:25px; background:violet}

Check out the DEMO here!

Answer №5

Do you require this?

CSS

.MainMenu{width: 680px; float: left; margin-top:25px; background:violet;float:left; width:300px;}
.MainMenu a{text-decoration: none; color: #FFF;display: inline; font-size: 18px; padding-left: 20px; }
.MainMenu a:link {color: #FFF; text-decoration: none;}
.MainMenu a:active {color: #; text-decoration: none;}
.MainMenu a:hover {background-color: #7D3B05; text-decoration: none;}
.MainMenu a:visited {color: #; text-decoration: none;}
.MainMenuBasket{float: left; margin-top:25px; background:maroon}
.MainMenuBasket a{text-decoration:none; color: #FFF;display: inline; font-size: 18px;  padding left: 20px;}
.MainMenuBasket a:link {color: #FFF; text-decoration: none;}
.MainMenuBasket a:active {text-decoration: none;}
.MainMenuBasket a:hover {background-color: #7D3B05; text-decoration: none;}
.MainMenuBasket a:visited {text-decoration: none;}

HTML

<div class="MainMenu">
    <a href="home.php">HOME</a>
    <a href="#">ABOUT</a>
    <a href="store.php">STORE</a>        
</div>

<div class="MainMenuBasket">
    <img src="../Images/jigsoar-icons/PNG/light/64px/64_cart.png" width="px" height="px" />
    <a href="#">BASKET</a>
</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

IE having issues with selecting all options button in jQuery, but it is functioning correctly in Firefox

In one part of my cgi code, I create the following: my $PARAMETER_HTML .= "<select name='parameters' id='parameters' size='10' multiple='multiple'>"; foreach my $values (sort @PARA_VALUES) { $PARAMETER_HTM ...

jqueryhtmlperlcgi

Troubleshooting a unique CSS problem on an Android PhoneGap

We are currently working on an Android application using PhoneGap, HTML, CSS, and jQuery Mobile. After compiling the application in Eclipse, everything seems to work correctly. However, I am facing an issue where my CSS styles are not updating when recompi ...

androidjqueryhtmlcsscordova

I am having trouble adjusting my web page to fit the screen fluidly as it appears too large and requires horizontal scrolling

As a student learning html/css, I am currently facing some challenges with my first website. My main issue is setting up the page to be fluid rather than fixed. The box, image, and text are all configured to be absolute on the page, but I cannot seem to ma ...

htmlcss

Disabling Hover effect on a particular element

Is there a way to eliminate the hover effect on my 'h3' tag (lighter grey hover effect), while keeping it as a link inside my 'a' tag? .speakers a { color: var(--clr-grey); } .speakers a:hover { color: var(--clr-lgrey); } &l ...

htmlcss

issue with stacking data in Google Charts

Check out my HTML code: <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></scri ...

htmlgoogle-visualization

Dynamic HTML Generation using ASP.NET

Below is the code snippet that needs to be optimized: <asp:TemplateField HeaderText="Item Data"> <ItemTemplate> <%# DataBinder.Eval(Container.DataItem, "ItemData1") %> <br />&nbsp;&nbsp; <%# D ...

c#asp.nethtmldata-bindingitemtemplate

Regular expression patterns for authenticating and verifying passwords

Currently, I am working on a JavaScript program to validate passwords using regex. Here are the requirements: The password must consist of at least seven characters. It should include at least one of the following: an uppercase letter (A-Z) a lowercas ...

javascriptphphtmlcssregex

What are some JavaScript alternatives to implementing an image mask like in CSS with webkit

Currently, I am enhancing my portfolio and looking to apply a PNG mask on some images. While the webkit image mask works well, I am interested in achieving similar results on Firefox and Opera as well. Is there a JavaScript solution that can help me achiev ...

htmlcsswebkit

How can you make the contents of a <DIV> expand?

Picture a scenario where I have a navigation bar in the header of my web page, consisting of several links. What I want is for these links to expand horizontally to fill the parent container without me having to hard-code based on the number of links. In o ...

htmlcss

Font distortion caused by Slick slider appears in an unexpected location in Chrome

Slick slider causing font issue in a different location specifically on Chrome Encountering a very peculiar situation where the font in a 3-column block with red titles within my slick slider appears slightly darker while transitioning to the next/previou ...

javascripthtmlgoogle-chromebootstrap-4slick.js

What is the best way to transmit user input to a command-line application and receive the resulting output?

Creating a ".html" file where users can input query sequence and database name for outputs. The user inputs Query sequence and Name of the database. To execute a local program called "cmd application," I need to save the query sequence in a txt file and ...

htmlvbscriptcmdhta

What is the best method for designing a filtering menu with a "Narrow By" option?

Looking to create a sidebar menu similar to the functionality on mcmaster.com. This specific feature allows users to efficiently filter products and toggle through different options dynamically. Upon selecting the "metric" option, the entire page adjusts t ...

javascriptjqueryhtmlajaxcss

Utilizing Angular controllers to access data attribute values from child elements

Today I embarked on the journey of learning AngularJs through online tutorials. Excited about my new project, I started working on creating some useful features using Angular. Here is a snippet of my progress so far: The HTML Part <div data-ng-control ...

javascripthtmlangularjs

Customizable dropdown menu design using HTML and CSS

Hello everyone, this is my very first post on Stack Overflow and I'm a bit unsure about the rules regarding posting. Please feel free to point out any mistakes I may have made. I've searched through the forums but haven't found a clear answe ...

htmlcssdropdown

Page is restricted to uploading only a single image at a time

I'm currently working on setting up a simple server that can handle both POST and GET requests. The goal is to allow users to upload images to a directory while saving relevant data like date, name, description, and id to a JSON file. In the case of a ...

javascripthtmlnode.jsjsonfile-upload

An HTML form is unable to send data to a JavaScript function via

Creating a web form in HTML for user input and submission, encountering an error when trying to load the submitted data from submitted.html. Error: Cannot POST /api/submitted The code within my index.html file is as shown below: <form action="/a ...

javascripthtmlmongodbexpress

Make the image responsive by aligning the right side accordingly

I am working on making an image responsive using HTML and CSS. My goal is to have the right side of the image crop as the screen size decreases to maintain the height and position of the image, similar to Nike's hero image. I want to keep the white sp ...

htmlcss

How to Alter Button Color upon Click in React with Bootstrap?

I'm working on implementing a thumbs up and thumbs down feature similar to Reddit's upvote and downvote system. The goal is to change the color of the object to green when the thumbs up is clicked and to red when the thumbs down is clicked. How ...

javascriptcssreactjsbootstrap-4font-awesome

Creating the appearance of a white sheet of paper on a computer screen

I appreciate all the comments provided earlier. Looking back, I realize I should have been more thorough in my explanation. Hopefully, the updated version will make things clearer. On a broad level, my goal is to create a digital screen background that re ...

htmlcsscolors

Locate grandchildren elements using getElementById

My task is to modify the content and attributes of the table. The DOM structure is generated by a third-party tool, and I am using JavaScript to make changes in various sections. <div id="myId"> <div> <div> <table&g ...

javascripthtml