I'm looking for advice on how to structure my HTML and CSS to accommodate a scenario like the one I've outlined below. The elements .avatar and .actions have fixed widths, while .comment does not. How can I ensure that .text takes up all available space as the width of .comment changes?
Sample psuedocode
<div class="comment">
<div class="avatar"></div>
<div class="actions"></div>
<div class="text"></div>
</div>
CSS:
.avatar {float: left;}
.actions {float: right;}
.comment, .text {overflow: hidden;}
.avatar {
float: left;
margin-right: 10px;
width: 100px;
height: 100px;
background: #fff;
}
.actions {
float: right;
margin-left: 10px;
width: 30px;
height: 130px;
background: #fff;
}
.comment, .text {
overflow: hidden;
}
.comment {
background: #eee;
width: 600px;
padding: 10px;
}
.text {
background: #fff;
}
HTML:
<div class="comment">
<div class="avatar">..</div>
<div class="actions">..</div>
<div class="text">Your comment goes here<br>more text<br>more text</div>
</div>
UPDATE: After considering clairesuzy's alternative approach, I believe their method is superior. Rather than specifying margins as I did, their technique utilizes overflow:hidden to ensure that text does not extend below the floated elements. This eliminates the need to manually set the widths of the two floats as margins. I am incorporating this new method into my repertoire.
The provided fiddle demonstrates my preferred implementation. Float .avatar on the left and .actions on the right. Assign left and right margins for .text, matching the widths of .avatar and .actions (this ensures that the content within .text remains separate from these elements). The sequence of elements is crucial to prevent .actions from wrapping onto a new line in IE7.
Instead of writing a lot of code, you could simply utilize a Flex Box (pure CSS) for a more efficient solution.
I've been encountering the following error message 'NavigableString' object has no attribute 'a' When attempting it this way def get_vlad(url): html = requests.get(url, headers=headers) soup = Be ...
Currently, I have a Div element with absolute positioning: <div id="target" style="height: 300px; position: absolute; top: 275px;"></div> My goal is to calculate the horizontal resolution of the screen using JavaScript. With this width, I the ...
My CSS :first-letter selector is effective on all p elements, however when applied to a span with the id #fletter, it doesn't seem to work... #fletter span:first-letter { font-weight: 600; font-size: 25px; } <span id="fletter"> The : ...
When utilizing Bootstrap 5 with Bootstrap Icons, I decided to increase the size of the icon using font-size:1.5rem;. However, this caused a disruption in the vertical alignment for the links (It works fine when the styling is removed and Full Page mode is ...
Greetings! I am a newcomer to the world of bootstrap, so please bear with me if my question seems too basic. My current challenge involves creating a navbar using bootstrap. However, I have encountered an issue where the logo remains on the left side whi ...
Successfully got my SASS up and running with the help of fantastic documentation available everywhere. The guide I followed was http://sass-lang.com/guide. sass --watch myfolder/css Running a specific command worked like a charm, enabling every change in ...
As a beginner in javascript and jQuery, I am working on displaying JSON results in the browser. My goal is to generate dynamic HTML by incorporating the JSON data. Below is an example of the JSON structure: [{"JobName":"JobDoSomething","JobStatus":2,"JobS ...
I have encountered a similar issue, but with a twist from Can't override root styles of Typography from Materil-UI Back in v4, I had a theme set up like this: import { createTheme } from '@material-ui/core/styles'; export const theme = cre ...
I am attempting to change the color of an individual tab using jQuery. However, when I set the background attribute in CSS, it colors the entire background instead. What specific property should I be setting to only change the color of the tab itself? ...
My website features a single-page layout with fixed navigation that allows users to easily navigate up and down the page using #. However, when the page loads I want it to display the second section of content instead of the top section. Is there a way to ...
Hey everyone, I'm having trouble getting the carousel from Bootstrap to work properly. I copied the code without making any changes, but for some reason, the carousel is not functioning (can't move to the next slide). Does anyone have a solution ...
Bar.html: <!DOCTYPE html> <head> <link rel="stylesheet" type="text/css" href="customStyle.css" /> </head> <body> The text formatting is spot on. Unfortunately, the following image should be centered, but it's off ...
Is there a way to overlay an icon on top of an image? .item { position: relative; } .des { color: #fff; text-align: left; } <div class="card"> <div class="item"> <img class="card-img-top" src="images/g33.jpg" alt="Avata ...
I recently created a table by extracting data from a database using a loop to retrieve all the necessary information. However, I encountered an error after calling a javascript function in the HTML onClick event of an input element. The function itself wor ...
I searched all over the internet and couldn't find a solution to this problem. Therefore, I have decided to pose the question myself. How can I center my text in HTML? I don't mean just aligning it centrally using "text-align:center;", but rathe ...
My challenge involves incorporating 3 images with different sizes into a Bootstrap grid of 3 x 4 columns: https://i.sstatic.net/sKi8s.png This is causing disruption in my layout. My desired outcome looks like this: https://i.sstatic.net/mfjFD.jpg How c ...
I'm in the process of automating report generation for my organization. Our workflow involves using R to summarize data from Excel, then utilizing Rmarkdown, knitr, and the "htmlTable" package to generate HTML files. Currently, I am implementing CSS ...
I've been attempting to format a text menu in my CSS so that the link matches the current URL, but it doesn't appear to be working. Here's the code snippet: #pages.tabs ul li a[href$=location]{color:blue !important;} , where #pages.tabs ul ...
Can anyone help me with an issue I'm facing in my form? Whenever I zoom in or out on my browser, the select element within the form gets resized and changes its position. Any suggestions would be greatly appreciated. Below is the code snippet for refe ...
I have a group of tr items in my list and I want to apply CSS styles to them in a specific pattern : red red red black black black red red red black and so on. Is there a way to achieve this using just one selector? Currently, I'm doing it like th ...