I often find myself struggling with the basics, it seems like I can't figure this out. I want the two spans to be centered within the div with auto margins...
https://jsfiddle.net/5k4pnmf7/
<div class='foo'>
<span class='bar'>one</span>
<span class='bar'>two</span>
</div>
.foo{
width:50%;
margin:auto;
background-color:blue;
}
.bar{
width:30%;
margin:auto;
background-color:red;
<div class='example'>
<span class='sample'>first</span>
<span class='sample'>second</span>
</div>
.example{
width:70%;
margin:auto;
background-color:purple;
text-align:center;
}
.sample{
width:40%;
margin:auto;
background-color:yellow;
}
check out this sandbox
Utilizing flexbox for layout
.foo{
display:flex;
flex-direction:row;
width:50%;
margin:auto;
background-color:blue;
}
#main{
margin:auto;
}
.bar{
border:solid yellow;
background-color:red;
}<div class='foo'>
<div id='main'>
<span class='bar'>one</span>
<span class='bar'>two</span>
</div>
</div>Alternatively, using text-align for alignment
.foo{
width:50%;
margin:auto;
background-color:blue;
}
.bar{
width:30%;
margin:auto;
background-color:red;
display: inline-block;
}
#main {
text-align:center;
}<div class='foo'>
<div id='main'>
<span class='bar'>one</span>
<span class='bar'>two</span>
</div>
</div>Alternatively, here's another approach you may consider
.foo{
display:flex;
width:50%;
margin:auto;
background-color:blue;
flex-drection:row;
}
.bar{
width:30%;
margin:auto;
background-color:red;
display: inline-block;
}<div class='foo'>
<span class='bar'>one</span>
<span class='bar'>two</span>
</div>It seems like the intention here is to evenly distribute the remaining white space (40% of the parent width) between the two span elements while also managing the spacing around them within the parent container.
An approach to achieve this would be setting the left and right margins of the first span to 13.3333% (which is 40% divided by 3). By floating the span elements, they will naturally align next to each other, considering the assigned margin values.
As for the second span, it doesn't require any margin adjustments as it will automatically position itself to the right of the first span.
To contain the floated elements properly, it is recommended to add overflow: auto to the parent container.
.foo {
width: 50%;
margin: auto;
background-color: blue;
overflow: auto;
}
.bar {
width: 30%;
background-color: red;
float: left;
text-align: center; /* optional... */
}
.bar:first-child {
margin-left: 13.3333%;
margin-right: 13.3333%;
}<div class='foo'>
<span class='bar'>one</span>
<span class='bar'>two</span>
</div>Check out my jsfiddle here I am attempting to modify the color of the scrollbar, but unfortunately it is not working as expected. This is the CSS code I am using: .flexcroll { scrollbar-face-color: #367CD2; scrollbar-shadow-color: #FFFFFF; ...
I currently have an array of .svg icons, each with unique properties that I need to customize: <svg width="24" height="24" viewBox="0 0 24 24"> ... </svg> import styled from 'styled-components'; import Github from 'assets/git ...
I would like the dropdown menu items to be clickable. For example: Menu item: Services Sub items: - branding } These already have working links - marketing } However, when I try to replace '#' with a link for Services, it d ...
I have created a form with date and time input fields. I utilized the joi library for input validation to ensure that the date and time inputs are not left empty separately. Although I have managed to apply date validation successfully, I am facing challen ...
I am having trouble getting my simple .load() function from jQuery to work. When I click on my DIV, nothing happens. However, the alert TEST does work. <div class="ing">CLICK HERE</div> <div id="overlay3-content"></div> <scrip ...
I'm attempting to generate an HTML table from data received on the web as a dictionary app.py: client = boto3.client('ec2') vpc_ids = client.describe_vpcs() for i in vpc_ids.get('Vpcs'): for tag in i.get('Tags'): ...
I am facing a challenge in grasping the interaction between flexbox containers and other elements on a webpage. When I have only a flexbox on my page, everything works smoothly. However, when I introduce other elements, things start acting strangely. It se ...
I am looking to create a hover effect on a div element that has a background-color, background-image, and text. What I want is for the background-image to slowly disappear when the div is hovered over, while keeping the text and background color visible. I ...
I am currently working on a project where I have styled multiple HTML tables on my website using alternating gray and white bands. Now, my goal is to highlight the selected row in a darker shade of gray. I have experimented with various solutions, and the ...
Is it possible to display two input fields side by side? I am using Angular's matInput forms, but struggling to position the second input next to the first. What I would like to achieve is to have "input1 , input2" on the same line. Here is my code: ...
<input name="name" type="text" ng-model="numbers" mandatory> Is there a way to dynamically remove and add the "mandatory" class in Angular JS? Please note that "mandatory" is a custom class that I have implemented. Thank you. ...
In my project, I have a style.less file that imports "page.less". Whenever there is a change made to page.less, I find myself having to go back to the style.less file and save it in order for less2css to compile and apply the changes. If not, the changes ...
After conducting some testing on a design I coded, I found that it functions well in FF 13, Chrome 21, IE 7/8, and Opera 11.62 for Windows, as well as Safari 5.1 for OS X. Unfortunately, since I only have WinXP, I had to utilize Adobe Browserlab to test f ...
Looking for a solution! // Getting user input values var input1 = parseInt(document.getElementById("input1").value); var input2 = parseInt(document.getElementById("input2").value); var input3 = parseFloat(document.getElementById(" ...
Within a parent div, I have 6 nested divs with no border-radius set. The parent div has a border-radius applied, causing the corners of the child divs to spill over the rounded corners of the parent. Even setting overflow to hidden does not seem to solve t ...
Is it possible to load a script in the header of a website instead of at the bottom? I've been trying but it's not working as expected. Here is an example of what I'm attempting: HTML file: <!DOCTYPE html> <html lang="en"> < ...
I am attempting to display or hide multiple services, each with a custom attribute called data-serviceregion, which may have multiple values based on the selected option from the dropdown. <form class="book-now"> <select name="region" id="region" ...
I've encountered an issue with my select menu. When I click on it, the options are displayed in a single line. However, upon selecting an item, it appears on two lines - one for the text and another for the icon. How can I ensure that the selection re ...
It's worth noting that I can't simply stack one image on top of the other because I'll be dealing with transparent images as well. preview of linear wipe ...
Within my textarea, I have lines that start with a number and a period: <textarea autoFocus id="text-area"wrap="hard" defaultValue ={this.state.textAreaVal} onKeyUp={this._editTextArea}/> For example: Line 1 Line 2 Line 3 I've created a ...