Challenges with resizing floating divs

Question

Challenges with resizing floating divs

As a beginner in Web Development, I am tasked with creating a web portfolio for an assignment.

In my design layout, I have a navigation bar in a div floated left, and a content div floated right serving as an about me section containing paragraphs and lists.

However, when resizing the browser, the right-hand content div drops below at a certain size. I would like the text within the content div to compress into the div instead of dropping down?

Note that I need to achieve this using HTML/CSS only, as JavaScript solutions will be introduced later in the assignment.

I have replaced all personal info in the paragraphs with similar placeholder text.

If this sounds like a trivial question, please bear with me as my code may seem amateurish since I'm still learning.

Any assistance or guidance on how to keep the text compressed within the content div upon resizing would be greatly appreciated.

html css css-float window-resize

Answer 1

Answer №1

Instead of delving into the specifics of your example, the issue arises from mixing percentage widths with pixel padding. To ensure responsiveness when resizing the browser, stick to using percentages exclusively. This same principle applies to border widths; if the element's width is set in percentages, then its borders should be as well - unless specific styles are triggered by CSS media queries at a certain width. The rule also extends to margins: if an element's width is defined in percentages, so too should its margin.

Answer 2

Instead of delving into the specifics of your example, the issue arises from mixing percentage widths with pixel padding. To ensure responsiveness when resizing the browser, stick to using percentages exclusively. This same principle applies to border widths; if the element's width is set in percentages, then its borders should be as well - unless specific styles are triggered by CSS media queries at a certain width. The rule also extends to margins: if an element's width is defined in percentages, so too should its margin.

Answer 3

Answer №2

To position the "text text text" div on the right side, add the following CSS to your styles:

#content-container {  display: inline-block; }

If you want to adjust the CSS based on screen size, you can utilize @media queries to set min/max-width and define a variable for display:

@media screen and (max-width: 800px) {
    div { background-color: red;}
}

@media screen and (min-width: 801px) {
    div { background-color: lime;}
}

In the examples above, when the screen width is 800px, the div elements will have a red background color, and if it's higher than that, they will be lime.

Essentially, you can use this technique to stack divs on top of each other or arrange them in any desired order. I believe this approach could be beneficial for your layout.

Answer 4

To position the "text text text" div on the right side, add the following CSS to your styles:

#content-container {  display: inline-block; }

If you want to adjust the CSS based on screen size, you can utilize @media queries to set min/max-width and define a variable for display:

@media screen and (max-width: 800px) {
    div { background-color: red;}
}

@media screen and (min-width: 801px) {
    div { background-color: lime;}
}

In the examples above, when the screen width is 800px, the div elements will have a red background color, and if it's higher than that, they will be lime.

Essentially, you can use this technique to stack divs on top of each other or arrange them in any desired order. I believe this approach could be beneficial for your layout.

Challenges with resizing floating divs

Answer №1

Answer №2

Similar questions

Learn the steps to successfully rotate the custom icon in Material-Ui select without impacting its functionality and making sure it remains clickable

Angular 6 and Bootstrap 4 Collaborate for a Dynamic Multi-Level NavBar

Having trouble with accessing the upvote/downvote input within a Django template

Turn off hover opacity effect for a specific image

Overlapping Image Arrows with CSS Styling

What's the best way to implement a font family in a React component?

JQuery cannot target content that is dynamically inserted through an Ajax request

What's the best way to navigate across by simply pressing a button located nearby?

Setting the root position of a div: How can it be done?

Determine the specific value of an HTML table cell by specifying the column name for a specific row

Interpreting HTML using a PHP script and running PHP commands embedded in the file

Establishing a Connection with Node/Express Routing via JavaScript

Troubleshooting Problems with CSS Before Selector and Margins

Acquiring the value of an input box in VBA through HTML

What is the reason behind the `h-full`/`height:100%` not completely filling the void within a div element?

Perform an action when the timer reaches zero

having difficulty placing 3 pop-up windows on a single page

In Chrome, there is a single pixel missing below the <dl> element

A single column in Bootstrap displaying text vertically

Transferring a Variable from Arduino to JavaScript