What is the best way to display DT elements next to each other?

Here is a link to the code snippet: http://jsfiddle.net/ZcdkT/1/

The code renders as:

DT-nameA
DD-definitionA 1

DT-nameB
DD-definitionB 1
DD-definitionB 2

I would like it to be formatted like this:

DT-nameA                 DT-nameB
DD-definitionA 1         DD-definitionB 1 DD-definitionB 2

I have attempted using display inline, float, clear... but I am unable to achieve the desired result. Does anyone have a solution?

Update: In some cases, there may be different size images within the anchors, causing them not to align properly. You can see an example of this here: http://jsfiddle.net/j6Ute/3/

css

Answer №1

To make this work, using separate DLs is crucial as it requires an additional wrapper element. Check out the code snippet below:

<div id="links-logolinks">
    <dl>
        <dt>Support</dt>
        <dd><a href="">support 1</a></dd>
    </dl>
    <dl>
        <dt>Partners</dt>
        <dd><a href="">Partner 1</a></dd>
        <dd><a href="">Partner 2</a></dd>
    </dl>
</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

Positives and negatives images for accordion menu

I have successfully created an accordion list using HTML, CSS, and JavaScript. However, I would like to enhance it by adding a plus and minus picture in the left corner of the heading. Is there a way to achieve this functionality? I have two images that I ...

javascripthtmlcssaccordion

When using percentages in HTML, the height and width of a background picture may not scale correctly

Currently, I am utilizing Webstorm software purely for HTML and CSS without any additional plugins. In my code, there is a <section> element that only has the <html> and tags as its parent elements. This particular section is assigned an ID th ...

htmlcss

What causes the unexpected behavior of JQuery's .animate() function?

I am currently working on a project that involves creating a div element for the purpose of dragging and dropping files. My goal is to have the height of the div increase when a file is dragged into it, and decrease when the file is dragged out. To achiev ...

javascriptjqueryhtmlcss

Guide on adjusting canvas height to match Full Document height (covering entire page)

Hello everyone, I'm getting in the holiday spirit by adding some snow falling effects using Canvas and it looks pretty awesome. The only issue is that it's filling up the entire screen due to: c.width = innerWidth; c.height = innerHeight; If a ...

jqueryhtmlcsscanvas

"Bordering with Rounded Edges: A CSS Styling

Applying rounded corners to my list navigation elements using CSS. These elements also have a border. Here's how it currently appears: The quality of the rounded corner and border combination looks off, with some white shining through. Any suggesti ...

cssrounded-corners

Issues with the animation of the navbar menu button are preventing it from functioning

I have been attempting to incorporate animation when the navbar-button is toggled on smaller screen sizes. Inspired by the design of .navbar-toggle.larr in this particular template, I tried to implement a similar effect. /* ANIMATED LEFT ARROW */ .navbar- ...

jqueryhtmlcsstwitter-bootstrapanimation

Tips for showcasing content by hovering over buttons with the help of Bootstrap3 and Jquery

My code and fiddle are currently set up to display buttons when hovered over, but I want to modify it so that only the relevant button is displayed when a specific text is hovered over. For example, if "Water" is hovered over, only the button for Water sho ...

javascripthtmljquerycss

I'm experiencing issues with my code involving HTML, CSS, and jQuery

Recently, I started learning about jQuery and came across a tutorial on creating a sticky nav bar. However, something went wrong during the implementation and now I don't know how to fix it! In my Script file, I have written code that should run on l ...

javascriptjqueryhtmlcss

"Troubleshooting a CSS Bug on a PHP Dynamic Web

I have a PHP web page that is dynamic. localhost/ctd/index.php Everything is working fine, except when I add a forward slash like this: localhost/ctd/index.php/ The CSS does not load. Is this a CSS bug or PHP issue? Here is the full code of index.php: ...

phphtmlcss

Ensure that the three.js script remains in a fixed position on a page that can be

Is there a way to make a 3D model created with three.js have a fixed position on a scrollable page, like a background while the rest of the content scrolls normally? Are there any CSS techniques or additional script elements that can be used to achieve thi ...

javascriptcsshtmlthree.js3d

Trouble keeping HTML/Javascript/CSS Collapsible Menu closed after refreshing the page

My issue is that the collapsible menu I have created does not remain closed when the page is refreshed. Upon reloading the page, the collapsible menu is always fully expanded, even if it was collapsed before the refresh. This creates a problem as there is ...

javascripthtmlcssmenu

Controller for Ionic 3 styles and loading animations

What is the best way to eliminate these white spaces in our fullscreen mode? View the image here removeWhiteSpace() { let space = document.getElementById('white-space'); if (space) { space.style.display = 'none'; ...

cssionic-frameworkionic2ionic3

Discovering the screen width and increasing its value using CSS

Is there a way to determine the screen size and then add 253px to it? For example, in CSS: .element { width: calc(100% + 253px); } What would be the best approach to achieve this? ...

htmlcss

Why are my styles not working when referenced from the .module.scss file?

Here is the code snippet from my Sublayout.module.scss file: .pl-6 { padding-left: 6rem !important; } .pr-6 { padding-right: 6rem !important; } .pl-12 { padding-left: 12rem !important; } .pr-12 { padding-right: 12rem !important; } After im ...

javascriptcssreactjssassvite

Unable to set a specific position for adding a new option in a dropdown menu

I have implemented a semantic UI dropdown using the code below: $('.ui.dropdown') .dropdown() ; <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <l ...

jqueryhtmlcssjquery-uisemantic-ui

Tips for positioning an asp.net Button alongside other elements in a form by making use of Bootstrap styling

Looking to revamp the style of my ASP.NET Web Forms project with the latest version of Bootstrap. Having trouble aligning an ASP.NET Button control horizontally with other controls in the form, as seen in this snapshot: https://i.sstatic.net/IVRKo.png Her ...

htmlcssbootstrap-4webforms

Shifting the MUI DataGrid Pagination table to the left with CustomPagination: A step-by-step guide

Hey everyone, I am currently diving into the MUI data grid to gain a better understanding. In order to meet my design requirements for a table view, I have incorporated the DataGrid component from MUI. For pagination, I am utilizing their custom implementa ...

javascriptcssreactjsmaterial-ui

Ways to identify when a React child element is overflowing

tl;dr How can I create a component that hides overflow and toggles views with a button? For example, the user can initially see tabs 1, 2, and 3 while tabs 4, 5, and 6 are hidden. Clicking a button will hide tabs 1, 2, and 3, and show tabs 4, 5, and 6 with ...

javascripthtmlcssreactjs

How do I use jQuery to animate a height increase where the added height is applied to the top of the element?

I am facing a simple issue that I need help resolving. The problem involves hidden content that, once expanded, needs to have a height of 99px. When collapsed, the container holding this content section#newsletter is set to be 65px in height. If you want ...

jquerycssheightjquery-animatefixed

Creating a CSS layout that eliminates the need for a vertical scroll bar

Currently, I am experimenting with creating an HTML CSS Layout using the div tag. You can view the code here Currently, the layout displays a vertical bar that I would like to eliminate. Ideally, I only want it to display if the content is lengthy. ...

css