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

Leverage JSON data in JavaScript

Having some trouble figuring out how to incorporate JSON values into my JS script. Any assistance would be greatly appreciated as I am still new to this! Below is the snippet of code where I need the values (lat and lon) to be inserted: var map; functio ...

javascripthtmljson

IE9 is causing a bizarre problem where the entire page is suddenly jumping. It's

UPDATE: The client has requested testing to disable the click and drag feature in IE, so replicating the bug may be difficult at this time. I apologize if this hinders the community's ability to help fix the root issue. Here's the issue: It occu ...

javascriptjquerycssdebugginginternet-explorer-9

Show input fields in a row

In an attempt to align my select form fields on the same line, I have tried adding display:inline; to both the select and label elements in my code. However, it did not produce the desired result. Here is the HTML code snippet: <form id ="myform1"> ...

css

Guide to configuring an Angular Material Footer using Flex-Layout

Could someone help me with setting up the footer in my Angular Material app? I want it to: stick to the bottom when the content height is smaller than the view-port move down or get pushed down when the content height exceeds the view-port One important ...

htmlcssangularangular-materialangular-flex-layout

Boosted by Bootstrap 4 running smoothly on Internet Explorer version 10

I'm starting to have second thoughts about my decision to move to B4. I'm currently troubleshooting the navigation in IE 10 using their example: https://getbootstrap.com/docs/4.0/examples/jumbotron/ After checking it on IE 10, I noticed that th ...

htmlcsstwitter-bootstrapbootstrap-4

Guide on implementing iterative data path in v-for loop using Vue

I'm just starting out with Vue and I want to use image file names like "room1.jpg", "room2.jpg", "room3.jpg" in a loop Below is my code, where the second line seems to be causing an issue <div v-for="(p,i) in products" :key="i"> <img src ...

javascripthtmlvue.jsv-for

What is the best way to connect an image to a different webpage?

I have a question regarding a div that contains an image acting as a link to another page. The image has text overlaying it and can be found at this link: This code was sourced from the internet, but I made some modifications to it. My goal is simply to ...

htmlcss

How can I adjust the transparency in a JavaScript popup modal window for an ASP.Net GridView?

Recently, I added an 'onclick' event to every row of an asp gridview and the popup window that appears is functioning perfectly. Now, I'm interested in adding a transparency level to the body of the popup window for a translucent effect. Can ...

javascriptc#cssasp.netgridview

Is there a bug causing the Admin LTE content height issue? Looking for solutions to fix it

What's the reason behind the oversized footer? The footer appears normal when I resize or zoom the page, why is that? How can this be resolved? ...

cssadminlte

Bootstrap navigation bar collapsing horizontally instead of vertically

My Navbar is collapsing correctly, but when I click the toggle icon after it's collapsed, the items appear in a horizontal row instead of the intended vertical block. I have checked the code on the Bootstrap 5 example page and tried to replicate it, b ...

htmlcsstwitter-bootstrapbootstrap-5

Unable to pinpoint the source of the excess spacing within a form field

There appears to be some extra space in the text field of my form, extending beyond the container margin. Please refer to the image and JSFiddle http://jsfiddle.net/GRFX4/. Any thoughts on what might be causing this issue? Thank you. HTML: <div id="co ...

htmlcss

How to Implement Dotted Line Styling for Row Data in ReactJS with CSS?

I'm working on a condensed design with Reactjs Monday......................08:00 AM - 21:00 PM I have a lot of dots in the display above. How can I make it shorter without using so many dots? Entering numerous dots like this is not ideal for the webs ...

cssreactjs

Tips for enabling autoplay for videos in Owl Carousel

I am facing an issue with implementing autoplay functionality for videos in an owl carousel. Despite trying different solutions found online, including this Owl Carousel VIDEO Autoplay doesn’t work, I haven't been able to make it work. Additionally, ...

javascriptjquerycssowl-carousel

Center align a font-awesome icon vertically next to a paragraph of text

Is there a way to align a font-awesome icon on the left side of a text paragraph while keeping the text on the right side, even if it's longer and wraps underneath the icon? I've tried various code snippets but haven't found a solution yet. ...

htmlcss

What are some methods for creating a responsive table design?

Here is my table that needs to be made responsive: <table style="width:100%" class="table table-hover"> <tr> <th>Booking Date</th> <th>Booking Id</th> ...

phphtmlresponsive-design

JavaScript - Unable to unselect a button without triggering a page refresh

I have a series of buttons in a row that I can select individually. However, I only want to be able to choose one button at a time. Every time I deselect the previously selected button, it causes the page to reload when all I really want is for all the but ...

javascripthtmlcss

What is the process for animating classes instead of ids in CSS?

My webpage currently features a setup similar to this. function wiggle(){ var parent = document.getElementById("wiggle"); var string = parent.innerHTML; parent.innerHTML = ""; string.split(""); var i = 0, length = string.length; for (i; i ...

javascripthtmljquerycsscss-animations

Extract content from an HTML form within a specific cell using Cheerio

A sample HTML table is displayed below: <tr class="row-class" role="row"> <td>Text1</td> <td> <form method='get' action='http://example.php'> <input type='hidden' ...

javascripthtmlnode.jshtml-tablecheerio

Looking at a web page within another web page by utilizing XMLHttpRequest

Recently, I created a web app featuring a preview window that displays the content of an HTML page. To keep up with the constant updates to the HTML page, I have set the preview window to refresh every 0.5 seconds. Although the functionality works correct ...

javascriptjqueryhtmlajaxxmlhttprequest

Tips for referencing the second class when two classes share the same name in Selenium WebDriver

I am trying to retrieve the text from the second "109-top-dark-grey-block ng-binding" class, which is currently null but will contain some text in the future. I have attempted using tabIndex and nth-child selectors, but neither have been successful. " < ...

javacssseleniumclassname