How can I create two left-aligned columns in CSS, with the first column being fixed in place?

Is there a way to create two columns without using HTML tables? I'm looking for the first column to contain an image and the second column to display text aligned left, extending to the rest of the page width.

I found this CSS solution for the first column:

#left_col {
       float:left;
        width: 650px;
}

However, I'm having trouble finding the right CSS for the second column. Most examples online show the second column as right-aligned. What's the best way in CSS to have two columns where the first is fixed and the second is aligned left (to the right of the picture)?

htmlcsscss-tables

Answer №1

Consider using the following code snippet:

#photo, #description{
    position: relative;
}
#photo {
    top: 0;
    width: 500px;
}
#description {
    top: 0;
    left: 500px;
    right: 0;
}

Click here to view a demo.

Answer №2

Both of your columns will share the same CSS properties, with each column occupying half of the total width. This concept is rooted in a simple grid layout structure for beginners to explore further :)

Answer №3

Don't forget to visit http://jsfiddle.net/EyKZ7/, and remember to keep the width of the second column as auto. This will allow it to occupy the remaining space.

Answer №4

If I'm understanding correctly...

HTML

<div id="left_content">
    Some content here
</div>
<div id="main_content">
    More content here
</div>

CSS

#left_content {
    float: left;
    width: 650px;
}

#main_content {
    margin-left: 650px;
}

DEMO

Live demo link

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

Flexbox - managing wrapping on legacy devices

Utilizing flexbox, I have successfully designed a 2 column layout with a div at the top spanning both columns for a menu format. While this works flawlessly in Chrome and iOS7, it appears to be ineffective in outdated versions of Safari. In this fiddle, yo ...

htmlcssflexbox

jquery's each method is not functioning as intended and causing unexpected issues

I'm in the midst of developing a website, and one section requires users to input their details into a form. My goal is as follows: When a user clicks the submit button with any empty fields, I want a span element (initially set to display none in CS ...

javascriptjqueryhtml

AngularJS - How to Deactivate List Items

Currently, I am working on developing a breadcrumb navigation system using AngularJS. However, I am facing an issue where some of the links need to be disabled based on certain user requirements not being met. After researching the Angular documentation, ...

htmlangularjslistitemangularjs-ng-disabled

After fetching an HTML snippet using the $.get() method, Font Awesome icons are no longer visible

Experimenting with creating a seamless 'single-page' experience, I've managed to achieve this by implementing an event listener in jQuery for menu link clicks. This triggers the replacement of the existing content in my main div with an HTML ...

jqueryhtmlcssfont-awesome

Material-UI is having trouble resolving the module '@material-ui/core/styles/createMuiTheme'

Although I have searched for similar issues on StackOverflow, none of the solutions seem to work for me. The errors I am encountering are unique and so are the fixes required, hence I decided to create a new post. The company conducting my test provided m ...

javascripthtmlcssreactjsmaterial-ui

Leveraging the power of Material-UI and React, modify the appearance of the "carrot" icon within the

Currently implementing MUI's textfield based on the information found at this link: https://mui.com/components/text-fields/. While there are numerous resources available for changing the font of the input text, I have not come across any documentation ...

javascriptcssreactjsmaterial-ui

The code functions perfectly on JSfiddle, but for some reason it halts when implemented on

Unfortunately, the code that was working perfectly on JSfiddle seems to be encountering issues when implemented on a regular HTML site. The content loads fine but there seems to be an error with the preview function after selecting an image. We have colla ...

javascriptjqueryhtmlcss

What is the best way to incorporate animation using Tailwind CSS within my Next.js project?

I have a challenge with placing three images in a circular path one after the other using Tailwind CSS for styling. I've identified the circular path and keyframe style for the images. How do I configure this style in my Tailwind config file and imple ...

javascriptcssreactjscss-animationstailwind-css

Phaser 3 shows images as vibrant green squares

In my project, I have two scenes: Loading and Menu. In the loading scene, I load images with the intention of displaying them in the menu. Here is the code for the Loading scene: import { CTS } from './../CTS.js'; import { MenuScene } from &apo ...

javascripthtmlhtml5-canvasphaser-framework

What is the best way to save variables in PHP for later use in various scripts?

As a newcomer to PHP programming, I am facing a rather simple issue that I haven't been able to solve despite trying various methods and searching online for a solution. Any assistance you can provide would be greatly appreciated. The problem at hand ...

phphtmlmysqlvariablesglobal-variables

Vuejs unstyled content flash

I encountered an issue while loading a page with Vue. Initially, I am able to access variables like @{{ value }} but once the page is fully loaded, the variable becomes invisible. How can I resolve this issue? I have already included Bootstrap and all scri ...

javascripthtmlvue.js

Tips for inserting an HTML element within an exported constant

I need help formatting an email hyperlink within a big block of text. Here is the code snippet: const myEmail = '<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e4b564f435e424b6e4b564f435e424b004d41 ...

htmlreactjstypescript

Ensuring the alignment of a personalized list bullet with the accompanying text

Looking to make the bullet point next to an li element larger? The common approach is to eliminate the standard point, add a custom one using the :before selector, and adjust the font size of the added point. While this technique somewhat achieves the goa ...

htmlcsshtml-lists

How to create a floating <Toolbar/> with ReactJS, Redux, and Material-UI

Can anyone help me figure out how to make a toolbar floatable when scrolling down using Material-UI? I tried setting textAlign:'center', position: 'fixed', top: 0, but it's resizing strangely when applied to the <Toolbar/>. ...

javascripthtmlreactjsmaterial-ui

What is the best way to retrieve the targeted style directly from CSS, rather than relying on the computed style of the element?

Although similar questions have been posed before, such as this one, I haven't found a working solution. Is there a way for me to retrieve the width attribute value from a CSS class and then write it to a div? I'm looking to access the exact va ...

jquerycss

Execute function prior to redirection of iframe

I have a specific challenge with an iframe on my webpage. I am looking to trigger a function right before the iframe reloads a new page, rather than after it has finished loading. I need this function to be triggered before the iframe redirects to the new ...

javascripthtmliframexhtml

Toggle visibility of anchor tags on screens with lower resolution

Looking for help with my code <div id="contact-buttons-bar" class="slide-on-scroll" data-top="250px" style="left: 0px;"> <button class="contact-button-link show-hide-contact-bar" style="left: 0px;"> <a class="contact-button-link cb-ancor f ...

jqueryhtml

Changing the appearance of a shadow root element using CSS styling

My CustomField has a FormLayout inside, and I want to change the #layout element within the shadow-root. While it can be done with JavaScript: document.querySelector("#myid > vaadin-form-layout") .shadowRoot .querySelector("#layout" ...

cssvaadinvaadin-flow

Choosing the attribute value using jQuery/CSS

Looking for a way to retrieve attribute value using jQuery/CSS <dt onclick="GomageNavigation.navigationOpenFilter('price-left');"> I tried using $("dt[onclick='GomageNavigation.navigationOpenFilter('price-left')']") bu ...

javascriptjqueryhtmlcss

Generate a menu submenu allowing for interactive toggling and dynamic visualization of expandable/collapsible sections upon clicking, featuring visually

Looking for assistance in creating a dynamic menu with sub-menus that can expand upon clicking. The goal is to have an expandable menu structure where the user can click to expand or collapse certain sections. However, my current code is not functioning co ...

javascriptjqueryhtmlcss