annoying box filled with information

Take a look at my http://jsfiddle.net/8wSzk/2/

<div class="row1">
<div>
    <div class="circle-menu">
    </div>
    <p> some option </p>
</div>
<div>
    <div class="circle-menu">
    </div>
    <p> some option <br /> and <br /> another option </p>
</div>
</div>
<div class="row2">
<div>
    <div class="circle-menu">
    </div>
    <p> circle3 </p>
</div>
<div>
    <div class="circle-menu">
    </div>
    <p> circle4 </p>
</div>
</div>

I am looking for help in aligning my circles in a straight line with the content just below each circle. I am still learning CSS, so any assistance would be greatly appreciated.

htmlcss

Answer №1

I believe this is the solution you are seeking. To align two elements next to each other, you will need to utilize the float property. Specifically, you should use float:left; in this scenario.

UPDATE CHECK OUT THE NEW DEMO

Answer №2

Follow these instructions

<div class="row1">
    <div>
        <div class="circle-menu">
        </div>
    </div>
    <div>
        <div class="circle-menu">
        </div>
    </div>
</div>
<div class="row1">
    <div>
        <p> select an option </p>
    </div>
    <div>
        <p> choose an option <br /> and then another option </p> 
    </div>
</div>

Answer №3

Check out this new Code snippet that works perfectly!

Hey there, I've revamped it for you. Take a look at the changes I've made.

<div class="row1">
<div class="circle-menu">
</div>
<div class="circle-menu">
</div>
</div>
<div class="options-row">
<div class="option">Some option
</div>
<div class="option">Some more options
</div>
</div>
<div class="row2">
<div class="circle-menu">
</div>
<div class="circle-menu">
</div>
</div>
<div class="options-row">
<div class="option">Even more options
</div>
<div class="option">Got the idea?
</div>
</div>

.row1 {
height:90px;
}
.row2 {
height:90px;
}
.circle-menu {
width: 80px;
height: 80px;
display: inline-block;
float:left;
background-color: #cacece; 
border-radius: 50%;
-moz-border-radius: 50%; 
-webkit-border-radius: 50%;
cursor: pointer;
margin: 5px;
}
.option {
display:inline-block;
width:80px;
margin: 5px;
text-align:center;
vertical-align:top;    
}
.options-row {

}

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

Several levels piled one on top of the other

I'm in the process of designing a section for a webpage using Bootstrap 3.0, and I want to layer three divs or sections on top of each other. The stacking order should be as follows: background "squares," footer, and foreground "squares" with images. ...

htmlcsstwitter-bootstrap

When you scroll a fixed element on the page, the block is truncated

I made a modification for adding cart items and included a script for managing my cart The cart is supposed to stick to the right edge and scroll up and down on the page Everything seems to work, but there's a slight issue when I click on Add 1 and ...

javascripthtmljquerycss

IE is causing issues with the transition

How come the transition doesn't seem to be working in this IE example? https://codepen.io/littlesnippets/pen/rxKBWq I've searched for solutions and tried adding recommended meta tags, doctype, etc., but nothing seems to work... /* This code ...

htmlcssinternet-explorertransition

Conceal the div using a sliding left animation

After researching extensively, I have been unable to find a solution to my problem. In order to better illustrate my issue, here is the code for reference: jsfiddle I am looking to create a sliding effect for a calc div where it moves to the left, simila ...

jquerycss

I'm having trouble getting the npm install for classnames to work within my li tag

I need some help with React JS. I'm attempting to merge my classes using the npm package called classnames. https://www.npmjs.com/package/classnames However, I'm encountering an issue: classnames doesn't seem to be working as expecte ...

javascriptjqueryhtmlreactjsredux

Instructions for implementing the iPhone Contacts header scroll effect on an HTML webpage

If you take a look at this jsFiddle I've set up, it should give you a better idea of what I'm trying to accomplish: http://jsfiddle.net/nicekiwi/p7NaQ/2/ Imagine the contact page on an iPhone's iOS, where as you scroll through the alphabet ...

javascriptiphonehtmlcssmootools

Which tool is best for comparing and minimizing duplicated CSS style sheets?

In my current project, I am working with 2 CSS files. The first one serves as a "default" style sheet that is used in all websites created from the same templates. The second file contains the specific styles for our application. Both of these files are in ...

csscomparediff

What are some effective methods for dynamically styling elements during iteration?

Need assistance with styling dynamic elements during iteration Located on the test.phtml page <?php foreach($tests => $test) { ?> <li class="<?php echo $test['class'] ?>"> <a href="#" title=""> Test In ...

htmlcssiteration

Implementing a parallax scroll effect using CSS and dynamically updating the background-position value with JavaScript

How can different Y position percentages be dynamically assigned to multiple layered background images in CSS using JavaScript so that they update as the page scrolls? <style> body { background-image: url(img/bg-pattern-01.png), ur ...

javascriptcssscrollparallax

Issue with running `npm start` in React after installing React script version 3.4.0

I'm new to React.js and I've been having trouble getting it to work after using npm start. No matter what I try, I can't seem to get it running. Any help would be appreciated. Error [email protected] start C:\xampp\htdocs& ...

htmlreactjs

The automatic redirection feature on a webpage is not functioning correctly on mobile devices

There's a peculiar issue on our website that I'll do my best to explain, and I'll provide photo links for more clarity. In our WooCommerce site, the process of paying for the cart goes as follows: Click "place order" button pic: Page for o ...

phpcsswordpress

Acquiring HTML form information in ASP.NET controller

Currently, I have a view that includes an HTML login form and I am working on passing the form values to a controller via post. My goal is to display the user's username using the Content method once the form is submitted. However, I am facing an issu ...

c#htmlasp.netformsasp.net-core-mvc

Ways to add a substantial quantity of HTML to the DOM without relying on AJAX or excessive strings

Currently, I am looking to update a div with a large amount of HTML content when a button on my webpage is clicked. The approach I am currently using involves the .html() method in JQuery, passing in this extensive string: '<div class="container-f ...

javascriptjqueryhtmlajax

Connecting to an element within a separate node (XSLT)

I have an XML document that includes a list of companies. My goal is to use XSLT to create links that point to the <link> child of the next company node. To provide a clearer picture, here is a snippet of sample XML data I am working with: <portf ...

htmlxmlxslt

Accessing the current window dimensions using CSS

I'm experimenting with a way to set the background of the entire body element. <html> <head><head/> <body> <div class="wrapper"></div> </body> </html> How can I determine the height and width of the cu ...

jqueryhtmlcss

The elusive three.module.js file has gone missing, leaving behind a trail of 404 errors

It seems like a simple mistake, but I'm encountering a 404 error for a file that actually exists: http://localhost:8000/Desktop/Skeletor/js/build/three.module.js net::ERR_ABORTED 404 (File not found) The correct path should be http://localhost: ...

javascripthtmlthree.js

What is the best way to display a scrollbar at the bottom of the table while setting the table height to

After writing the css provided below, I noticed that it works fine on my laptop screen. However, when viewing it on a larger monitor, there is empty space at the end of the table. .wrapper{ width:auto; height: 500px; overflow-x: scroll; ...

htmlcssangulardatatablesangular-datatables

The loading of charts and animations is sluggish on mobile devices

My Chart.js chart starts with 0 values and updates upon clicking submit to load data from an external database. While this works efficiently on a computer browser, the load time is significantly longer when accessing the page on a mobile device. It takes a ...

javascriptjqueryhtmlchartschart.js

What is the method to ensure span elements wrap text without setting a specific width or maximum width on the parent div?

Here is a snippet of code I have generated for displaying warnings or errors in Dojo dialogs: /* Relevant CSS styles */ .l-status-message-wrapper { height: auto; margin-left: 5px; margin-top: 2px; min-height: 15px; } .l-status-message-w ...

htmlcss

Fully compatible with Internet Explorer 6, with a height of

Is there a way to create a div that is always 100% the height of the browser, even if it's empty, and works in IE6? Any suggestions or hacks using CSS? ...

cssinternet-explorer-6