Trouble with Two Divs Layout

My website layout includes links on the left side of the page within a floating div, with content on the right side in another floating div. However, I'm facing an issue where the content moves below the links when the page is resized.

I attempted to fix this by wrapping the entire page in a div, but this caused the links to stop functioning correctly and made it difficult to position the content as needed.

Below is the CSS code for the wrapper div:


#wrapper {
    margin: 0 auto 0 auto;
    min-width: 960px;
}
csshtml

Answer №1

Elements that are floated will act in this way because they are positioned outside of the normal page flow.

If you are seeking a solution, you may want to consider implementing a flexible two column layout.

Answer №2

The primary issue lies in the fixed widths assigned to the divs. The initial solution involves converting the widths to percentages or em units.

To address this effectively, consider starting in fullscreen mode and creating a blank page with no content. This approach allows you to assign different background colors to the divs without any interference from existing content.

Additionally, you may want to float both divs to the left and initially position them relatively for better alignment.

Answer №3

I discovered a great solution for dealing with window resizing problems. Just follow the example of popular websites like WordPress and this one: create blank, resizable margins around the page and set all the content to a fixed width.

The "liquid" style, using percentages and such, can be stylish but often doesn't quite look right. It's better to design your page slightly narrower than the full window and allow different browsers to adjust the margin size as needed.

To achieve this, I personally like to style the html tag with a specific width, like 1000px, and then use margin-left:auto; margin-right:auto; to keep it consistently centered.

EDIT:

Add the following code to your CSS:

html {

width:66em;

margin-left:auto;

margin-right:auto;

}

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

Adjusting Text Size Depending on Width

I recently used an online converter to transform a PDF into HTML. Check out the result here: http://www.example.com/pdf-to-html-converted-file The conversion did a decent job, but I'm wondering if it's feasible to have the content scale to 100% ...

javascripthtmlcssfont-size

Can someone help me troubleshoot this issue with my code so that my website can open in a blank page using about:blank?

I'm currently facing an issue while trying to make one of the pages on my website open with an about:blank URL upon loading. Despite embedding the code in my index.html file, it doesn't seem to be functioning properly. Here's the code I&apos ...

javascripthtml

Creating a cell in HTML/CSS with wrapped data

Is there a way to properly wrap data in the table instead of getting a scroll bar when the template name is too long? I would like it to automatically go to the next line. <table class="selectablePreviousOrder dashboard"> <tr ng-class-odd=" ...

htmlcss

Display multiple values in a select dropdown using Bootstrap 5 properties

I am stuck with the following code<hr> HTML <select id="select" placeholder="Choose Select" class="selectpicker" multiple></select> <div class="container"> <div id="all" clas ...

javascripthtmlbootstrap-5bootstrap-selectbootstrap-selectpicker

Transferring data from PHP to an HTML function

I have attempted to retrieve the coordinates generated by the geocode and passed them to the function initialize in order to display a map with the location. Despite transferring the variables from PHP to the function initialize(), it seems that the lati ...

phphtmlfunction

Unique form validation process: utilizing JSON

Attempting to validate JSON input using Angular's FormControl. The typical approach, such as validating an email address, would involve: <form name="form"> <textarea ng-model="data.email" type="email" name="email"></textarea> &l ...

htmljsonangularjsvalidation

Arranging multiple lines of text above several images using CSS

I'm encountering issues when trying to place multiple texts in front of multiple images. I've managed to achieve this using absolute and relative positioning, with one text above one image. However, the problem arises when I try to apply this to ...

css

Aligning Divs in a Responsive Browser

In the following illustration, I am facing an issue with my responsive code. I have three sections named square1, 2, and 3, each containing a white div with text on top and an icon positioned absolutely. Everything works fine when the browser width is 920p ...

htmlcss

A tutorial on utilizing fopen in PHP to write text lines to a .txt file

Struggling with PHP code utilizing fopen to write text lines into a textarea and save them to a .txt file. Below is the code I've been working on, hoping to get some assistance! <?php session_start(); if (!isset($_SESSION['username&ap ...

phphtml

Material UI - Array of Chips

I have been working on creating a ReactJS component that displays an array of chips with unique styling for each one. To achieve this, I created individual makeStyles classes for the chips. However, I encountered difficulties in dynamically changing the cl ...

javascriptcssreactjsmaterial-ui

Move the grid items to their new positions with animation

I have a group of floating elements, all the same size and arranged within a grid layout. I am now adding a new element using jQuery's .after() method, which is larger in size and spans the entire width of the container, necessitating its own row. T ...

jquerycssinsertgrid-layout

Is there a way to incorporate a CSS file into this without explicitly mentioning the color?

I have successfully implemented a PHP solution for changing themes with a cookie that remembers the selected theme color when the user leaves the site. However, I now need to switch this functionality to JavaScript while still utilizing the CSS file. How c ...

javascriptphpcsscookiesthemes

The error message "Cannot read property 'option0' of undefined" occurs when using Node.js with Express and EJS

script.js var choices = { choice0: 11, choice1: 'choice1', choice2: 'choice2', choice3: 'choice3', choice4: 'choice4', choice5: 'choice5', choice6: 'choice6', choice7: 'choice7', choice ...

javascripthtmlnode.jsexpressejs

What could be the reason behind my jQuery UI buttons suddenly appearing oversized and lackluster?

Previously, I utilized the jQuery UI to enhance button appearance. However, with this code snippet: else if (ui.newTab.index() == 3) { $('#MediaContent').load('Content/TwainMedia.html'); $('#MediaContent').css('b ...

jqueryhtmlcssjquery-uijquery-ui-button

Styles in NEXT.js are not loading properly due to issues with the Module

I have been attempting to apply module.css to one of my components by following the instructions provided in this tutorial https://nextjs.org/learn/basics/assets-metadata-css/layout-component. /*/components/Livestream/App.js*/ import styles from './A ...

javascriptcssreactjssassnext.js

Hide the cursor when the text box is in focus

Is there a way to remove the cursor from a textbox when it is clicked on? I want the cursor to disappear after clicking on the textbox. jQuery(document).ready(function($) { $(function(){ $('#edit-field-date-value-value-datepicker-popup-0&ap ...

jqueryhtml

I want to update the toggle switches within the GridToolbarColumnsButton component from MUI's DataGrid to checkboxes

Currently, I am developing a website where one of the pages has tabular data fetched from the backend. To filter this table, I utilized Mui filters from datagrid({...data}components={{ toolbar: CustomToolbar }}). Among these filters is a GridToolbarColumns ...

cssreactjscheckboxmaterial-uidatagrid

Discrepancies in Span Element Behavior Between Firefox and Chrome

Seeking assistance with a tooltip feature that reveals extra information when a user hovers over a span. The issue arises when the span is split across two lines, causing the extra information to appear in different positions on Firefox and Chrome browsers ...

css

Limiting uploaded files in HTML5

<input type="file" accept=".csv" /> This code snippet enables users to upload .txt files or any other type of file as well. What is the method to limit the types of files allowed in HTML5? ...

htmlfile-upload

Repetitive use of multiple submit buttons in AngularJS

i'm currently working with AngularJS Currently facing this issue: view screenshot I have utilized the following HTML code to display submit button for two different types of forms. One for TEXT Form and one for ENUM Form: <div ng-controller="g ...

javascriptjqueryhtmlangularjsforms