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

Having several contact forms embedded within a single webpage

Automatically activate the next tab in Bootstrap

Issue with table cell resizing improperly with scrollable pre content

Unable to retrieve data from Flask for AJAX request

Utilizing the powerful combination of TailwindCSS and Next.js Image to achieve a full height display with

Javascript menu toggle malfunctioning with sub-menus

Issue with exchanging columns in Bootstrap version 5.0

Tips for showing a value in a disabled text input box

Guide to attaching a mouse click event listener to a child element within a Polymer custom component

The Php Include function is known to create unnecessary whitespace and disregard any specified styles

Stop using Flexbox in Material UI on small screens

Hover your mouse over the menu to activate a timeout feature

I am attempting to get a jquery plugin to function properly on my Windows 7 Internet Explorer IE7 browser. The plugin in question can be found at http://jvectormap.owl-hollow

Unused sizing attributes in IMG tags

When the window is scrolled to 50%, I would like to load some additional data

The background image stubbornly refuses to stretch to the full width of the section container

Images for the background of the table header and sorting icons

Styling Your PHP Output with Echo

The HTML element failed to be inserted

The navigation bar on the website highlights vibrant green arrows next to the