I have a parent div containing three child divs with dynamically changing widths. I am trying to align the first div to the left, center the middle one with equal padding on both sides, and align the right one to the right.
It may sound simple, but it's proving to be quite challenging for me!
To achieve equal width for each element, simply set the width of each element to 33%. For a visual demonstration, check out this JSFiddle demo.
HTML
<div class="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
CSS
.container{
width: 100%;
}
.left{
background-color: red;
float: left;
text-align: left;
width: 33%;
}
.center{
background-color: green;
float: left;
text-align: center;
width: 33%;
}
.right{
background-color: blue;
float: left;
text-align: right;
width: 33%;
}
One possible solution is to utilize the display:flex; property. For more information, you can refer to this discussion on Stack Overflow: Why does display: -ms-flex; -ms-justify-content: center; not work in IE10?
Alternatively, you could mimic the effect using inline-block and text-align:justify; techniques. Here's a codepen example that demonstrates how to achieve this for older versions of Internet Explorer: http://codepen.io/gcyrillus/pen/Babcs :
<div class="justify">
<div>Left</div>
<div>Middle</div>
<div>Right</div>
<!--[if lte IE 7]>
<span class="ie"></span>
<![endif]-->
</div>
If I understand correctly, you can solve your issue by utilizing lists.
Simply place the content of the left, center, and right divs within list items and apply inline display and padding as shown below:
li {
padding: 0 50px 0 0;
display: inline;
}
I've created a fiddle for you to reference. I hope this solution works for you!
Someone attempted to modify the following fiddle but ended up making the wrong changes! Regrettably, I am unsure of the individual responsible for this edit. It may have been spezzino, however, I cannot be certain:
HTML
<div class="wrap">
<div class="left">
left
</div>
<div class="right">
right
</div>
<div class="center">
center
</div>
</div>
CSS
.wrap{
text-align:center;
}
.left{
float: left;
background:grey
}
.right{
float: right;
background:red
}
.center{
text-align:left;
background:green;
margin:0 auto;
display:inline-block
}
http://jsfiddle.net/66fCm/136/
In any case, this solution functions flawlessly :-) Would someone kindly mark this response as correct since I am unable to do so myself due to low reputation.
An alternative option is to utilize a table for this purpose. Tables are advantageous due to their structured layout and functionality.
My HTML structure consists of repeating pairs of img and p tags. Often, the img tag is missing from the sequence. <img> <p></p> <img> <p></p> <img> <p></p> <p></p> <p></p> <i ...
When working with Angular, I am faced with the challenge of making a panel header sticky based on the user's scroll position on the page. I have identified two potential solutions for achieving this functionality. One involves using pure CSS with pos ...
After implementing the login with classes from bootstrap: <p class="h4 mb-4">Sign in</p> <h5 class="card-header info-color white-text text-center py-4" >Sign in</h5> I noticed that instead of having colors as shown below: https:/ ...
My HTML code contains font awesome icons, and I'm looking to have text appear below each icon instead of next to it. Currently, the text is displayed midway to the right of each icon. <div class="icons"> <span class="fa-stack f ...
Looking to populate a selectlist in HTML with options retrieved from an API. Below is the HTML code : <div id="example" role="application"> <div class="demo-section k-header"> <select id="FeaturesSelec ...
My Google-fu is failing me. Consider the following code snippet: var stateObj = { state: "some state" }; history.pushState(stateObj, "page 2", "other.htm"); Does this trigger a window callback? I am aware of the following code: window.onpopstate = fun ...
One of the key features on my website is a navigation bar that takes users to the home page as well as a page where they can post questions. Although the user avatar displays properly on the home page, it does not show up on the page for posting a que ...
How can I implement a live search feature in my Flask application using WTForms/Jinja2 to mimic the functionality described here? The code snippet provided already has an example working for the third box, but I'm struggling to adapt it to work with m ...
Is there a method to reveal the dropdown content only upon clicking instead of displaying all content at once and increasing the lines of HTML code? Perhaps using an onclick attribute on the button and incorporating a function inside? var data = [{ " ...
According to W3: The omission of an end tag for an li element is allowed if it is immediately followed by another li or if there is no more content within the parent element. However, this structure: <ol> <li>one <li>two ...
My div block has text overlapping the image, and when I resize the screen, the block with the text gets smaller but stays in the same position. I want to move the block to the left side while resizing the screen so that the entire block fits on the screen. ...
I've been attempting to load a value obtained from clicking a button into an if statement within my HTML template, but have hit a roadblock. Perhaps I'm approaching this the wrong way. I tried utilizing the var tag and placing my variable inside ...
As I work on styling a basic menu, I'm struggling to find a solution for adding padding to list items so they all have a consistent look. The challenge arises from the fact that I have an unordered list where list items may or may not contain an anch ...
I am currently working on adapting a horizontal desktop navigation menu to be responsive. I successfully changed it to display horizontally on smaller screens, but now I am facing an issue with the dropdown submenus covering the parent items below them. Wh ...
I have been working on dynamically adding new inputs and trying to assign a new ID that increments by 1 each time I add a new input. However, I am facing an issue where the value is not incrementing as expected. Can someone please help me identify what&apo ...
Does the transform: none result in matrix(1,0,0,1,0,0) or a different outcome? I am looking to reset the transform; what is the best approach for this? <style> .box{ height: 100px; width: 100px; background-color: red; transition: 0.5s; transform: ...
Is there a way to create a CSS arrow with a gradient instead of a solid color? Below is the CSS I have been experimenting with: .breadcrumbDivider .arrow-right { width: 0; height: 0; border-top: 25px solid transparent; border-bottom: 25px solid ...
Facing a problem with my jQuery animations. Successfully implemented the slide in effect for my flex sidebars, but struggling with the slide out effects. The slide out function is causing the sidebars to vanish instantly. I think I need to incorporate the ...
Trying to display an HTML page on local host using a restful flask API. The content of the HTML page appears as a string with "" instead of rendering the actual page. class data(Resource): def get(self): #return "Welcome!" return rende ...
I am attempting to embed a Leaflet map within a standard Sails.js view. Sails.js automatically includes a page header on every page. Currently, with a fixed height, the map appears like this: #mapid { height: 400px; } https://i.sstatic.net/pzOdql.jpg ...