Is there a way to stretch two <div> elements to be 50% wide? Here is a jsFiddle with the solution.
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>
div.container {
width: 100%;
}
div.left, div.right {
display:inline;
width:50%;
}
div.container {
width: 100%;
white-space: nowrap;
}
div.left, div.right {
display: inline-block;
width: 50%;
}
Check out the latest jsfiddle here
Alternatively:
div.container {
width: 100%;
}
div.left, div.right {
float: left;
width: 50%;
}
To create a two-column layout, you can utilize the inline-block property along with box-sizing: border-box for better control of spacing (especially if you have borders).
Check out this live demonstration for reference.
Here's the CSS code:
div {
box-sizing: border-box;
}
div.container {
width: 100%;
position: relative;
border: 1px solid blue;
}
div.left, div.right {
display: inline-block;
width: 50%;
border: 1px solid black;
}
And here's the corresponding HTML structure:
<div class="container">
<div class="left">left</div><div class="right">right</div>
</div>
Keep in mind that intentionally omitting a space between inline elements serves a purpose, as the presence of a space can impact the layout of inline elements.
There are various approaches to achieve this. One option is to use CSS in the following way:
div.left, div.right {
position: relative;
float:left;
width:50%;
}
Alternatively, here is another technique that can produce the desired outcome:
div.container {
position: relative;
width: 100%;
}
div.left {
position: relative;
width:50%;
}
div.right {
position: absolute;
margin-left:50%;
width:50%;
top:0
}
How can I ensure that the display of an element remains unchanged when a user opens and closes my website menu using JavaScript? ...
My image doesn't appear in the correct position when I dynamically set it using the margin-top. Below is an image with a red arrow pointing to the right, which is what I want: https://i.stack.imgur.com/ue4mY.png The CSS I have is as follows: .file ...
Greetings! As a newcomer to the realms of PHP and AJAX, I am currently on a quest to showcase the outcomes of a query within an HTML dropdown using AJAX. Let's delve into my PHP code: $pro1 = mysqli_query("select email from groups"); I made an attemp ...
When clicking a hyperlink on a page, I need to open multiple pop-up windows. To achieve this, I must use the Window.open function instead of showModalDialog. However, I have noticed that the appearance is not satisfactory when using Window.open. (Essentia ...
One issue I am encountering is my inability to use Javascript to change the text within an HTML p tag. I have an HTML button with the id="knap" and a p tag with the id="answer". My goal is to change the text in the "answer" tag when the user clicks on the ...
As a newbie, I recently received training in HTML, CSS, and a bit of JavaScript. Currently, I am involved in a project where I display the latest news from an API. The technical aspects of fetching data from the API using JavaScript are handled by a senior ...
Looking for some help with a jQuery issue. I have a pop-up that opens when a div is clicked, but I want it to close when clicking outside of the div instead of just on the close button. <a class="close-up" href="#" onclick="popup('popUpDiv')" ...
It seems that someone is able to use any type of extension as long as they add .png at the end of the link. is currently being used, causing users on my website to log out when visiting the homepage. I tried to stop this issue, but unfortunately, my sol ...
After creating a spa with vue.js for the frontend, I utilized the vuetify library for various components and layout. While everything looked great locally, upon deploying to Azure, all vuetify styling seemed to disappear. My custom css was still applying ...
There seems to be an issue with removing the selected attribute from the selected values in a jQuery multiselect box. The console is not showing any errors. You can view a working example here The problem lies in this code snippet: $("#mltyslct option ...
Utilizing Bootstrap in my main menu was essential for navigating through the numerous pages, subpages, and sub-subpages within my project. The dropdownmenu feature proved to be very helpful in this regard. However, my client now has a specific request - t ...
I have encountered an issue with displaying special characters correctly. Despite my efforts, the characters are not showing up as intended. Here is how I defined it: var grade_value = 'Wešto izšamešđu'; Following that, I execute this code ...
I have two separate players in two different views within the DOM. Each player retrieves a video file asynchronously from my database using a unique ID. The first player functions correctly, but I am uncertain how to replicate this for ...
This question has significantly evolved following additional testing I am using a table layout similar to this: <table> <tr> <td></td> <td style="padding:10px 3%;"> <div border="2px solid #000000;"> ...
I have created a unique slideshow that overlays multiple images using JavaScript to change their opacity and attributes. You can view the slideshow here: Upon inspection (using firebug), I noticed an issue with how the images are displayed. When the displ ...
My understanding of javascript and jquery is at a beginner level. I am interested in creating a design similar to Sevenly, where one page/div moves over another. I'm not sure where to begin with this. Any advice or ideas on how to implement this effec ...
Is there a way to achieve 5 floating divs on one row with a 20px margin-right between each, except for the last-child? This is the desired structure: <div class="f-item pull-left">1</div> <div class="f-item pull-left">2</div> < ...
Currently, I am working with an expandable Card component from Material-UI and using flex for aligning the components. However, when one card expands, it affects the positioning of the other components in the row: https://i.stack.imgur.com/vGxBU.png What ...
I currently have a code snippet that replaces a span class with a hyperlink. The hyperlink contains an abbreviation, and the alternate text for the link also includes the same abbreviation. Now, I am looking to replace the second abbreviation in the alte ...
I've been diving into the functionality of the html2image package and noticed that it's having trouble locating my locally stored images. My code snippet looks like this: from html2image import Html2Image hti = Html2Image() html_str = "&q ...