the contents exceed the boundaries

As I work on creating a page to display a list of books, I am facing an issue where the content sometimes overflows out of the book-info box. This usually happens when a book's title is excessively long and goes beyond the set height of 140px. I am seeking advice on the best solution to this problem. Below you can find a snippet of my code.

//css
.book-data{height: 140px; width: 500px};
.book-image{float: left; width: 200px;}
.book-info{float: left; widdth: 300px;}

//html
<div class="book-data">
    <div class="book-image"></div>
    <div class="book-info">content</div>
</div>

<div class="book-data">
    <div class="book-image"></div>
    <div class="book-info">content</div>
</div>
htmlcsscss-float

Answer №2

By allowing the book-data div to maintain its height as auto, you can ensure that text will wrap around it even when floated. Adding the clear both property will prevent the collapse of the book-data div if a height is not set. Give this a try, I'm confident it will work:

//css
.book-data{width: 500px};
.book-image{float: left; width: 200px;}
.book-info{float: left; width: 300px;}
.clear {clear:both;}
//html
<div class="book-data">
    <div class="book-image"></div>
    <div class="book-info">content</div>
    <div class='clear'></div>
</div>

<div class="book-data">
    <div class="book-image"></div>
    <div class="book-info">content</div>
    <div class='clear'></div>
</div>

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

Bootstrap for handling screen rotation and responsive design

Utilizing bootstrap to showcase canvas thumbnails within a div for lighter client-side creation. While not the perfect design, it's functional. An issue arises when viewing the app on a mobile device in portrait mode - the col-xs-6 class remains fixe ...

androidhtmlcsstwitter-bootstrapresponsive-design

Tips for choosing specific characters from a string using JavaScript

When dealing with URL strings like "example.com/Apps/Visitor/visitscanner" , "example.com/Apps/Seatings/visitscanner I am interested in extracting the directory name following the "http://example.com/Apps/" For the above examples, if the URL string is " ...

javascripthtmlstring

Is there a way to simulate pressing a keyboard button using jQuery?

Below is the code snippet: $("input").on({ keydown: function(ev) { if (ev.which === 27){ // esc button backspace_emolator(); } else if (ev.which === 8){ // backspace button console.log('backspace button ...

javascriptjqueryhtmleventskeyboard

Modify HTML files prior to transmission from an express server

This method comes in handy when you only have a few elements that need to be updated on your webpage, offering a seamless way to refresh the content without the need for additional HTTP requests or frontend manipulation. ...

htmlnode.jsexpress

Tips for initiating a function at a designated scroll point on a webpage

Currently, I am testing out a code snippet that allows images to flip through in a canvas element. I'm curious if it's possible to delay the image flipping effect until the viewer scrolls down to a specific section of the page where the canvas i ...

javascripthtmljquerycanvashtml5-canvas

Creating a vertical navigation menu and displaying its submenu on corresponding pages in a horizontal layout

I'm struggling to design a navigation layout for my website where I want to display the main menu items like this: Menu 1 Menu 2 Menu 3 Menu 4 Menu 5 and have their respective sub-menus displayed horizontally on their main menu pages like this: ...

htmlcssmenu

"Position the input file with Bootstrap's input text for a seamless alignment

After experimenting with the design of my input file using this code snippet, I am facing difficulties aligning the button within the text input of a bootstrap element. Below is the code I have used to style my input field, but unfortunately, the bootstra ...

css

Utilizing media queries for responsive design in CSS

I've been working on aligning the page content for different browser sizes using CSS. However, I'm having an issue with the first @media statement - no matter what changes I make in there, it doesn't affect the layout. I've been using ...

cssmobilemedia-queries

Is there a way to stop TinyMCE from adding CDATA to <script> elements and from commenting out <style> elements?

Setting aside the concerns surrounding allowing <script> content within a Web editor, I am fully aware of them. What I am interested in is permitting <style> and <script> elements within the text content. However, every time I attempt to ...

javascripthtmlcsstinymce

Validating Date Input in HTML and JavaScript Text Fields

When designing my form, I wanted to ensure that users could only input digits and hyphens in a text field where they enter a date. However, I encountered some difficulty implementing this feature. Currently, the field only accepts digits and removes any le ...

javascripthtml

When the ::after pseudo element is utilized for creating a bottom border, it will display following each individual list item contained within the specified div

I have been using a pseudo-element to create a division line between sections, and it was working perfectly until I added a list of items. Now, the division line is appearing after every <strong> and <li> tag. I have tried various approaches, s ...

htmlcsspseudo-element

Making a page jump with Javascript

Welcome! Let's dive into our question. Below you'll find my script and HTML code: My Script: const resultEl = document.querySelector('.allquotes'); const pageSize = document.querySelector('select[name="page-size"]') ...

javascripthtmlpagination

Issues with clicking on the ion-tab icon in AngularJS are hindering the functionality

I'm currently facing a challenge with an ion-tab icon in my AngularJS project. I've been attempting to add a click action using the code below, but unfortunately, nothing is displaying as expected. HTML <ion-tab title="Share" icon="icon ion- ...

javascripthtmlangularjs

Adjusting the color of text based on the fulfillment of a condition

Is there a way to change the text color of a variable based on its value in PHP? For example, if the $status is set to admin, can we display it in red when echoed out using <h3>Status: <?php echo $status; ?></h3>? I'm not quite sure ...

phphtmlcss

Arrange database by website domain in PHP

I'm facing an issue where I need to extract domain names from a database and build buttons that can be used to sort the database based on these domains. For example, clicking on the Gmail button should sort users with Gmail accounts, and clicking on t ...

phphtmlcss

Troubleshooting a problem with a personalized webkit scrollbar in Chrome

Using the CSS property scroll-snap-type: y mandatory; to customize my scrollbar with the following styles: ::-webkit-scrollbar { width: 12px; background: transparent; } ::-webkit-scrollbar-track { background-color: rgba(0, 0, 0, 0.5); -webkit-box-s ...

javascripthtmlcss

When sending a post request in MongoDB, only the object's _id is displayed

Can someone help me with an issue I am facing with a contact form in my HTML file? The form code is as follows: <form action="/contact" method="post"> <input type="text" name="name" id="" placeholder="Name"> <input type="email" name ...

htmlnode.jsmongodbexpressmongoose

Discovering checkboxes in HTML using jQuery

Greetings! I have limited knowledge when it comes to using jQuery. I am currently facing an issue with the Checkbox attribute. Below, you will find the code snippet that I have mentioned: Code: $( this ).html() Output: <input name="cb_kot[]" class= ...

javascriptjqueryhtml

Leveraging JQueryUI for an audio Seek feature, and dynamically connecting a fresh slider to the <audio> element whenever a song is swapped out

Thanks for taking a look at my question. The code snippet can be found HERE. I'm in the process of creating an audio player to handle multiple songs on a single page using JQueryUI Slider and HTML5 Audio, with one Audio element and several sliders. ...

javascriptjqueryhtmljquery-uihtml5-audio

jQuery not functioning properly when included in a separate JavaScript file

I'm facing an issue with my jquery code not working properly when I place it in a separate js file instead of embedding it directly into the html. Currently, my setup looks like this: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3 ...

jquerycssresponsive-design