Center float elements with a percentage width

I am attempting to design a layout in which two elements float alongside each other, starting from the center.

I have been successful in achieving this, but only when the width of the two floating elements is fixed.

Want to take a look? Follow this link: http://jsfiddle.net/q7uey80L/3/

Does anyone have a solution for setting the width of elements .right and .left to a percentage instead of a fixed value like 300px while maintaining the same alignment from the middle?

When I change the width value from 300px to 20%, the structure gets disrupted as the elements start from the left rather than the center.

htmlcss

Answer №1

It seems to me that utilizing float might not be the most effective approach for your task. Consider using flexbox as a potential solution instead.

.container {
    border: solid blue 1px;
    display:flex;
    justify-content:center;
}
.right, .left {
    width: 25%;
    border: green solid 1px;
}


h1 {
  margin: 0;
  padding: 0;
}
.wrapper {
  border: solid red 1px;
  text-align: center;
}
.container {
  border: solid blue 1px;
  display: flex;
  justify-content: center;
}
.right,
.left {
  width: 25%;
  border: green solid 1px;
}
.right {
  text-align: left;
}
.left {
  text-align: right;
}
.clear {
  clear: both;
}
<div class="wrapper">
  <h1>Top titel</h1>
  <div class="container">
    <div class="left">
      Quisque viverra ac augue porta auctor. Fusce sollicitudin tellus risus, sit amet commodo felis tristique in.
      <br/>Integer tempor ultricies eleifend. Vivamus id pretium dolor, vitae sagittis massa.
      <br/>Pellentesque pulvinar neque interdum dolor pulvinar tempus. Nullam congue tempus dignissim.
    </div>
    <div class="right">
      Vivamus massa lacus, dignissim ac accumsan non, lacinia in libero. Nullam tempor, velit nec fringilla feugiat, arcu libero viverra nibh, ullamcorper ultricies ante felis non risus.
      <br/>Vivamus feugiat augue nec tellus sodales interdum. Suspendisse ac libero malesuada
    </div>
    <div class="clear"></div>
  </div>
</div>

Answer №2

For optimal layout, it is recommended to insert an additional div between the main container and the left/right divs. This way, you can set the width as a percentage and apply margin: 0 auto to center the content within the container.

.right, .left {
    border: green solid 1px;
    float: left;
    width: 45%;
}
<div class="container" >
    <div style="width: 60%; margin: 0 auto; height: 200px">
        <div class="left">
           Quisque
        </div>
        <div class="right">
           Vivamus
        </div>
    </div>
</div

Take a look at the example here: http://jsfiddle.net/z6s1ddnx/1/

Answer №3

Did you mean to refer to this link: https://jsfiddle.net/anjalysaju123/5pypkfky

The CSS provided is as follows:

h1 {
margin: 0;
padding: 0;
}
.wrapper {
border: solid red 1px;
width: 100%;
height: 100%;
text-align: center;
}
.container {
border: solid blue 1px;
display: inline-block;
}
.right, .left {
border: green solid 1px;
float: left;
width: 49%;
}
.right {
text-align: left;

}
.left {
text-align: right;

}
.clear {
clear: both;
}

Answer №4

It appears that the issue stems from the .container element having a display of inline-block without a specified width. To address this, consider setting a specific width for the .container and then using percentage values for the widths of the inner elements like .left and .right. By doing so, the percentages will be calculated based on the width of the containing element. Here is a helpful JSFiddle link: http://jsfiddle.net/q7uey80L/5/

.container {
    border: solid blue 1px;
    display: inline-block;
    width: 500px;
}
.right, .left {
    border: green solid 1px;
    float: left;
    width: 30%;
}

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

Retrieve the JSON data embedded within the HTML source code and utilize its contents

I stumbled upon a URL like http://example.com. Taking a look at the HTML source, it appears as follows: <html> test test2 {"customer":{"email":null,"is_eu":true"} t </html> My goal is to extract the JSON data from this source and then manipul ...

phphtmljson

Is it possible to adjust the left property following the concealment of an element with JQuery?

My goal is to move an image element using the 'left' property after hiding a div. To achieve this, I am using JQuery's '.promise()' function. Here is my code: HTML code: <div id="outerContainer"> <div id=" ...

jqueryhtmlcss

Attempting to incorporate Font-Awesome Icons into the navigation bar tabs

As a newcomer to React, I've been attempting to incorporate Font Awesome icons into my secondary navigation bar. Despite using switch-case statements to iterate through each element, all the icons ended up looking the same, indicating that only the de ...

javascripthtmlreactjsxmlfont-awesome

Choose checkboxes from an array of values using AngularJS

I have recently developed a page that includes text boxes, radio buttons, and checkboxes. This page serves as a platform for saving new data or modifying existing information. While I can successfully save new data, I encountered an issue when trying to ed ...

htmlangularjsarrays

Issue with CSS elements unable to shift to the left

My attempt to align CSS elements to the right using margin-right: 200px is not working, while margin-left: 200px does. This issue arises even though my CSS file appears as follows: .wrapper { display: inline-block; position: abso ...

csshtml

Customizing Material UI: Adjusting the visibility of slider thumb upon user interaction and value changes in the slider

In my application, I have implemented a Material UI Slider and I am looking to keep the thumb invisible until the user interacts with it. Once the user changes the slider value, I want the thumb to remain visible at that specific value. By using the CSS pr ...

cssreactjsmaterial-uislider

Determine the exact moment at which the value shifts within the table

Looking for assistance in automating the grade calculation process whenever there is a change in table values. Any suggestions on how to achieve this? I am new to events and AJAX, so any help would be appreciated as I am still learning. Please see the ima ...

javascriptphphtmlajax

The reverse animation for .is-exiting in Smoothstate.js is not triggering

I've been searching for a solution to my issue but haven't had any luck finding one that works for me. Currently, I am using smoothstate.js to trigger animations when the page loads and ideally reverse them when the page exits. However, while th ...

jquerycsssmoothstate.js

how to position one div above another using css

I currently have a page layout with 7 different div elements structured like this; <div id="container"> <div id="head"></div> <div id="A"> <div id="A1">A1</div> <div id="A2"></div> ...

css

Creating a JavaScript-powered multi-department form: A step-by-step guide

Is there a way to maintain the form displayed on a webpage created in HTML5 and JavaScript for logging calls across three different departments? With buttons assigned to each department, clicking on them reveals the respective HTML form. That said, every t ...

javascripthtmlcss

Styling an image with dual attributes using CSS

I'm looking to customize two img classes with different properties. For instance, in my CSS, I want to define: img { padding-left: 15pt; float: right; } and then: img1 { padding-left: 15pt; float: left; } where img1 would serve as a tag fo ...

htmlcss

Stylish grey container with crisp white lettering

Just getting started with HTML and I've been working on a project for my class. Here's what I've come up with: <font style="background-color: grey; color: white; display: block">Black and white copies $.10 per page letter/legal size&l ...

css

Expand Bootstrap accordion on hover

I have tried several examples that I discovered on Google and Stack Overflow, but none of them seem to work. So, I decided to attempt a different solution for opening the Bootstrap accordion on hover, however, it is not working as expected. Do you have any ...

javascriptjqueryhtmlcsstwitter-bootstrap

Enhancing the performance of jquery selection speed

I am currently working on a code that manipulates the HTML code of an asp.net treeview. Since this code runs frequently, I need to ensure that it executes with maximum speed. I am interested in expanding my knowledge on jQuery selectors and optimizing th ...

javascriptjqueryhtmlperformancecpu-speed

Difficulty in breaking text within flexbox styling

I'm facing an issue where the text inside a flex container does not break correctly when the horizontal space is too small to display it all. But shouldn't it still not break even in the "normal" state? What mistake have I made here? (functio ...

htmlcssflexbox

Differences in CSS text padding when rendered in Firefox compared to Chrome and other web

Seeking assistance with a site issue that has been causing frustration. I have spent the entire evening trying to solve it without success. The issue at hand involves modifying tag appearance after each article on my website. The problem arises when viewi ...

cssfirefoxgoogle-chromeheight

Issue with relative input causing Jquery click event to not fire

Jquery $(document).on("click","[type=text]",function(event) { alert('test'); }); CSS .noWorking:focus{ z-index:100; position:relative; outline:none; box-shadow:0 0 0 1000px rgba(0,0,0,.2); } To ensure the shadow appears on top of all oth ...

jquerycssfirefox

Update the loading animation to utilize a custom image instead

I found a preloader code on this website that rotates fontawesome icons and displays the percentage after a few seconds. However, I am looking to replace the fontawesome icon with an image but have been unsuccessful in my attempts. Is there a way to easil ...

htmljquerycssfont-awesomepreloader

Transforming the DOM using jQuery

I am looking to manipulate the DOM using jQuery. This is the initial source code: <td class="name"><a href="position_details.php?x=-109&amp;y=95">21</a> </td> <td class="name"><a href="position_details.php?x=-109& ...

javascriptjqueryhtml

Does HTML elements come with a pre-set background color of white or transparency by default?

Feeling a bit confused about a straightforward issue. Can someone clarify for me - What is the original background color of HTML elements? Is it white by default or transparent? ...

htmlcss