select only a single element within a specific section/div

One of the challenges I'm facing on my HTML page is with a section that has a max width set by a container. The heading and two columns in this section are not floated, only the columns are floated left while the heading is center text aligned. This arrangement causes the border I put around the section to wrap around the heading, leading to misalignment in other sections of the page. Is there a way to fix this issue?

<section class="carousel freedom container"> <!--Freedom section -->

 <h1> This is the heading </h1> 

<ul class="two-col left-col">
<li class="pen"> <span class="icon-text"> <span> TEXT TEXT TEXT TEXT TEXT TEXT TEXT</span> </li>
<li class="phone"> <span class="icon-text"> TEXT TEXT TEXT TEXT TEXT TEXT TEXT</span> </li>
</ul>
<ul class="two-col right-col">
<li class="arrow"> <span class="icon-text"> TEXT TEXT TEXT TEXT TEXT TEXT TEXT</span> </li>
<li class="download"> <span class="icon-text"> TEXT TEXT TEXT TEXT TEXT TEXT TEXT </li>
</ul>
 </section>   <!--End of Freedom carousel -->

Fiddle link: http://jsfiddle.net/7khffLsm/

csshtml

Answer №1

JSFiddle - VIEW DEMO

To create a two-column layout, you can utilize the CSS property display: inline-block; for elements with classes .left-col, .right-col and remove float: left;

CSS:

.container {
    max-width:1024px;
    margin: 0 auto;
}
.left-col, .right-col {
    list-style: none;
    width: 45%;
    display: inline-block;
    margin: 0;
    padding: 0;
}
.two-col li {
    padding-left: 30px;
    margin-top: 20px;
    margin-left: 30%;
}
.carousel h1 {
    font-family:"HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", "Helvetica";
    font-size: 20pt;
    color: #252525;
    font-style: normal;
    text-align: center;
    line-height: 24pt;
    letter-spacing: 0em;
}
.carousel.freedom {
    border: 2px solid;
}

HTML:

<section class="carousel freedom container">
    <!--Freedom section -->
     <h1> This is the heading </h1> 
    <ul class="two-col left-col">
        <li class="pen"> <span class="icon-text"> <span> TEXT TEXT TEXT TEXT TEXT TEXT TEXT</span> 
        </li>
        <li class="phone"> <span class="icon-text"> TEXT TEXT TEXT TEXT TEXT TEXT TEXT</span> 
        </li>
    </ul>
    <ul class="two-col right-col">
        <li class="arrow"> <span class="icon-text"> TEXT TEXT TEXT TEXT TEXT TEXT TEXT</span> 
        </li>
        <li class="download"> <span class="icon-text"> TEXT TEXT TEXT TEXT TEXT TEXT TEXT </li>
</ul>
</section>   <!--End of Freedom carousel -->

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

Conceal the navigation bar when scrolling to the top of the

Hey there! I'm looking for a way to hide my navigation bar when not scrolling, and then display it again once I start scrolling. Currently, I have two menus on this website: one with a white background and the other with a blue background. You can fi ...

javascriptjqueryhtmlcss

The advice I received was to avoid using max-width and instead utilize min-width when styling with CSS

With @media screen and (max-width:700px) { Link to image 1 Whenever I use @media screen and (min-width: 700px) { it messes up. How can I adjust it for min-width without causing issues? Link to image 2 ...

css

Display the output of awk on a single line for specific columns

Here is a file called "test" that displays the following information: vserver share-name path acl TEST_SERVER TEST_SHARE_PATH /TEST/TESTSHAREPATH "test\testuser / Read","test\testuser1_R / Read","test\testuser2_RW / Change ...

htmlawk

Align the pseudo-element in the center of the parent element using the display property set to table

Can anyone provide guidance on how to center a pseudo-element specifically on an element that utilizes display: table-cell? I have tried various methods but it keeps getting centered only to the parent element with display: table. ...

htmlcssnext.js

Having trouble retrieving the selected value from a dropdown list with Jquery

In my current setup, I have a drop-down list situated within a pop-up modal. The dropdown menu is structured like this: <select name="EventTypeId" class="form-control formTextBox" id="ddlEventType"> <option value="">Please Select</optio ...

javascriptjqueryhtml

Automate the process of launching the <select> picker through programming

In an Android WebView, I need a way to programmatically trigger the opening of the select element picker provided below. <select id="select1" multiple="multiple"> <option value="MDO1" selected="selected">MDO 1</option> <option val ...

javascriptandroidhtmlwebkit

The issue with mobile responsiveness is specifically occurring on the Samsung Note 21 and iPhone 14 devices, while functioning properly on all other devices. Attempts to reproduce the error using Chrome dev tools

I'm facing a unique issue at the moment. The landing page I've created is highly responsive on all mobile devices except for the web owner's device: . Interestingly, it appears differently on the web owner's Samsung and iPhone devices:S ...

htmlcss

Guide to making a sidebar navigation menu on the left using Bootstrap

How can I create a left navbar using Bootstrap? I managed to do it. <nav class="btn-group-vertical float-left navbar"> <button routerLink="product/home" routerLinkActive="is-active" class="btn btn-outline-dark">Home</button> ...

htmlcssangularbootstrap-4

steering clear of iframes, yet incorporating certain iframe-like functionalities in Rails

One of my sites is my primary site, while the other serves as a help site with documentation. The main site is built using Rails, whereas the secondary one is just a basic WordPress blog. Right now, I have it embedded into the main site using an iframe. ...

ruby-on-railsrubyiframehtmlpartial

use jQuery to retrieve the value of an attribute

I am having trouble extracting the value of the name attribute from this HTML code: <select id='id_select'> <option name='nm_opt' value='23'>Val1</option> <option name='nm_opt2' value='16 ...

jqueryhtmlappendattr

A step-by-step guide on using a loop to display three images per row

The issue at hand is quite logical... I'm attempting to create a photo gallery by fetching image URLs from a database... The problem arises when I try to display them in HTML. I'm using bootstrap for the layout, where each row should contain 3 im ...

phphtmlbootstrap-4logic

How can CSS be used to create rounded corners on an entire webpage?

Looking for advice on how to enhance the appearance of my Progressive Web App (PWA) on devices with a "notch". I have sketched out the design with red arrows. If you need to inspect the CSS classes, you can visit my website at . I am seeking recommendation ...

cssnext.jsiphone-x

Replace the instances of "foo" with "bar" in the phrases "foo bar" and "bar foo."

Using a regular expression, I am able to locate specific words and then manipulate them in some way. For example: I want to surround all the words I find with <strong> tags: $string = 'Hello, there is foo, after there is bar but now I need fo ...

phphtmlregex

Tips for emphasizing the current element without disrupting existing styles

Is there a way to highlight an element with a border without causing it to shift? The script seems a bit glitchy when detecting mouse leaving the area. I'm unable to override parent element properties like border or outline. I also can't use pse ...

javascripthtmlcss

Formatting Issue with HTML Form (Width Exceeding Specifications)

Currently, I am in the process of creating a table that contains various forms and buttons within the cells. However, there seems to be excess space between the buttons which is giving the appearance of the form being too wide. I have been attempting to di ...

htmlcss

Looking to verify a disabled select element and adjust the opacity of that element when it is disabled

$_product = $this->getProduct(); $_attributes = Mage::helper('core')->decorateArray($this->getAllowAttributes()); ?> <?php if ($_product->isSaleable() && count($_attributes)):?> <dl> <?php foreach($_attrib ...

javascriptjqueryhtmlcssmagento-1.9

Using a subheader in conjunction with a virtual repeater in markdown does not function correctly

Currently, I am utilizing angular 1 along with angular material. I am trying to incorporate md-subheader with multiple md-virtual-repeat-containers within an ng-repeat loop. The source code can be found on this codepen. The issue I am facing is slightly c ...

htmlcssangularjsangular-material

How come the logout option is not displaying after creating it with Laravel's Bootstrap authentication method?

Check out this navigation bar code snippet: @else <a id="navbarDropdown" class="nav-element" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" a ...

phphtmllaravelbootstrap-4

The height problem arises when using Bootstrap 5 flex tables with striping and vertical text centering, as the td element takes on the line-height

Creating a bootstrap table with columns and rows: <tr class="d-flex"> <td class="col">Voornaam</td> <td class="col">Sean</td> </tr> When trying to center the elemen ...

htmlcssflexboxbootstrap-5

What is the best way to run a JavaScript function once another function has finished executing?

I am looking to ensure that a JavaScript function runs only after another one has finished executing. Here is the code I currently have: $(window).load(function(){ $('#dvLoading').fadeOut(2000); }); window.addLoadEvent = function() { $('#p ...

javascripthtmlexecute