DIV not displaying in a horizontal arrangement

I'm trying to get Box1 and Box2 to appear side by side, but for some reason Box2 keeps appearing below Box1. I've simplified the code to remove any links or references, but I can't figure out why they won't align properly.

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="KnowledgeBase.ascx.cs" Inherits="Control_KnowledgeBase" %>
    <!-- OPENS THE PAGE HEADER DIV -->
    <div id="MainContent">
        <!-- OPENS THE MAIN CONTENT DIV -->
        
        <h2 class="Billboard">
            <a href="#">System Knowledge Base</a></h2>
        <div class="Billboard">
            <p align="center">
                    <a href="../customercare.aspx">Home</a> I <a href="../customercare.aspx">Customer Care</a> 
                    I <a href="../fieldcustomercare.aspx">Field Customer Care</a> 
                    I <a href="../Logout.aspx"> Logout </a>
                </p>
        </div>

        <h2 class="Billboard">
            General System Information</h2>
        <div class="Billboard">
            <p>
                80 Links and Documents
            </p>
        </div>

        <h2 class="QuickLinks">
            Build Release Notes</h2>
        <div class="QuickLinks"style="float:left;width:48%;">

                <p>
             120 Links and Documents

                </p>

            </div>


        <h2 class="QuickLinks">
            Supplemental Release Notes</h2>
        <div class="QuickLinks"style="float:left;width:48%;">

                <p>

10 Link and Documents

                </p>
             </div>


        <h2 class="Billboard">
            TFACTS Customer Care</h2>
        <div class="Billboard">
            <p>
                10 Link and Documents
            </p>
        </div>
        <h2 class="Billboard">
            Reference Materials and Storyboards
        </h2>
        <div class="Billboard">
            <p>
                250 Links and documents
            </p>
        </div>
        
    </div>;
htmlcss

Answer №1

VIOLIN http://jsfiddle.net/4ajw5kuh/

some elements were not correctly formatted

<div class="container">
     <h2 class="FeaturedItems">
                    Latest Products</h2>

    <div class="FeaturedItems"><p>PRODUCT1</p>
    </div>
</div>
<div class="content">
     <h2 class="FeaturedItems">
                    Special Offers</h2>

    <div class="FeaturedItems"><p>PRODUCT2</p>
    </div>
</div>

include display:inline-block;

.container, .content { 
   display: inline-block; 
    margin: 15px;
}

Answer №2

You are dealing with two mismatched div tags here. Simply replace the </p> with a </div>:

<div class="box1">
    <h2 class="QuickLinks">Build Release Notes</h2>
    <div class="QuickLinks">TEST</div>
</div>

<div class="box2">
    <h2 class="QuickLinks">Supplemental Release Notes</h2>
    <div class="QuickLinks">TEST2</div>
</div>

Your CSS code should look something like this:

.box1 { float: left; margin-right: 1em; clear: left; }
.box2 { float: left; clear: right; }

Answer №3

Consider utilizing one of these techniques in your CSS:

.container1, .container2 {
    float: left;
}

or

.container1, .container2 {
    display: inline-block;
}

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

Creating visually appealing definition lists

My goal is to customize the appearance of a shopping cart that is created by a rigid system where I cannot modify the html code. The categories list is generated in the following manner: <dl id='dlCatLvl1' class='clsCatLvl1 clsOffCat1&ap ...

htmlcssstyling

How can grid be used in CSS/HTML to create two collapsible columns that are side-by-side, maintain equal width, and keep their size when expanded?

Hello all, I'm new here and I have a question that I hope I can explain clearly. I am currently working on creating two collapsible "buttons" positioned side by side (each taking up half of the screen width), which expand when clicked to reveal an equ ...

htmlcsscss-grid

Steps to customize the appearance of a button within a file input field

When implementing the file input in my code on a Mac, I noticed that the alignment appears off. On all other devices, it looks just fine. However, when I try to apply a style specifically to the 'Choose file' button, the style also gets applied t ...

htmlcssalignment

Guide to using the DOM inspector tool with a RAW HTML document

Utilizing PHP Simple HTML DOM Parser, I periodically extract information from various websites. I rely on Chrome's DOM inspector to analyze how to retrieve the desired data. An issue arose when one website (specifically TPB) had improper HTML code th ...

phphtmlgoogle-chromedomweb-scraping

Javascript unable to update the DOM

I've been working on a project to prototype a simple functionality using JavaScript for learning purposes. However, I've encountered an issue where the contents within the <p> tag are not updating, and I'm currently stuck. Here's ...

javascripthtmlajaxdominnerhtml

Cleaning Data-* Attributes with Jsoup Whitelist Sanitizer

Using the jsoup whitelist sanitizer to sanitize html before serializing (json) and ajaxing it. Is there a way to permit all data-* attributes in html without having to manually add each instance to the whitelist? ...

htmljsonjsoupwhitelist

Access the input field value with PHP and store it in a variable

I previously looked into this issue, but the solution provided in the accepted answer did not resolve it for me: How to get input field value using PHP Below is an excerpt from my result.php file: ... <th> <form name="form" action= ...

javascriptphphtmlformsinput

Retain the contents of the shopping cart even when the page is refreshed

For a course project, I am recreating a grocery store website and need assistance on how to retain the shopping cart values even after refreshing the webpage. Please inform me if more information is required... <button type="button" id= ...

javascripthtmlcssajax

The appearance of my website appears differently depending on the resolution

Just recently, I began exploring the world of HTML/CSS/JS and created a handy tool for my personal use. However, I encountered an issue when viewing it on different resolutions which caused some elements to look distorted. The tool I made allows me to inp ...

javascriptjqueryhtmlcss

Identifying the HTML tag under the cursor with TWebBrowser

Is there a way to determine which HTML tag, specifically a hyperlink, the caret is currently on? procedure THTMLEdit.ShowTag; var CursorPos: TPoint; HtmlElement: IHTMLElement; iHTMLDoc: IHtmlDocument2; begin if Supports(wbBrowser.Document, IHt ...

htmldelphiinternet-explorerdelphi-xe7twebbrowser

What is the best way to adjust the size of a background image on Safari

Using Chrome When using Chrome, the functionality is just like what's depicted in the image above. However, when using Safari The issue arises, as it does not work as expected in Safari. See below for the CSS code: background-image: url(r ...

htmlcssimagesafariresize

Glowing effects on svg shapes

I'm looking to add a pulsing light animation around an SVG half circle shape that I have created. After experimenting with CSS and Webkit, the closest I've come is achieving a pulsing light around the parent element, rather than the actual shape ...

javascripthtmlcsssvgvue.js

Listening for position changes using jQuery events

It is essential to be able to track the relative position of elements, especially when dealing with dynamic layout issues. Unfortunately, there are no built-in options in CSS to listen for changes in position() or offset() attributes. Reason: Changes in a ...

jquerycssposition

Assign a value to the input field based on changes made in another input field

I am brand new to the world of JavaScript and currently grappling with setting a value in an input field based on the onchange event of another input field. Here is my code sample for input field 1: <input type='text' onchange='methodTh ...

javascripthtmldom-eventsonchange

Adding Custom CSS File to an iFrame in Angular

Currently, I am attempting to include a CSS file in a third-party iframe to modify its styling. My initial idea was to employ the following code snippet: ngOnInit() { ... this.myIframe.nativeElement.document.head.appendChild('style.css') } U ...

cssangulariframe

Image transformation not rotating the image

I'm having trouble making an image of an X rotate 180 degrees when it's hovered over. Instead of rotating, the image just moves up and to the right. What am I missing that's preventing this from looking like a smooth 180-degree spin? .bl ...

htmlcsstransformcss-transforms

Incorrect data for minimal values within Google charts

Currently, I am utilizing a Google chart found at the following link: In my data set, I have significantly high values for the line chart and relatively low values for the bar chart. In order to make both types of data more easily readable, I would like t ...

javascripthtmlgoogle-visualization

Pictures are automatically adjusted to a resolution of 0 x 0 within the Heroku application

I have encountered an issue with my simple webpage hosted on Heroku. Despite appearing perfectly fine on localhost, 4 images are automatically resized to 0x0 when viewed on Heroku. I am struggling to identify the cause of this problem. Here is how it appe ...

htmlcssheroku

The strategic positioning of JavaScript/JQuery scripts in correlation with HTML

Here is an example of working code snippet: <a id="btnCapturePhoto" data-role="button" href="#page1">Capture Photo</a> <script type="text/javascript"> $($("#btnCapturePhoto").click(function captureImage() { alert('capture button ...

javascriptjqueryhtmljquery-ui

Is there a way to extract a value from a string and store it as a variable in

Creating a functionality to resize images from WordPress. The goal is to extract the width and height values from a string similar to this: <img src="/path/img.jpg" width="600" height="400" /> Next step is to remove the specific values (600 and 40 ...

phphtmlvariablessearch