Leveraging Columns in HTML and CSS

Looking to create a layout with 2 separate columns for the content on my website. The desired layout is shown below:

https://i.stack.imgur.com/V4uX2.jpg

On my computer monitor, it displays as intended. However, on my mobile device it appears like this:

https://i.stack.imgur.com/H7CNe.png

I want the two columns to always be side by side, and not stacked on top of each other as on mobile.

CSS

#leftSide {
margin-top:80px;
margin-left:200px;
float:left;
width:400px;
}

#rightSide {
margin-top:80px;
margin-left:10px;
float:left;
width:400px;
}

HTML:

<div id="leftSide">
</div>
<div id="rightSide">
</div>
htmlcss

Answer №1

Make sure to inspect the resolution of your mobile device. If it has a screen width below 800px, your content may not display properly as it requires more than 800px for optimal viewing.

Additionally, when aiming for a 2-column layout, consider using CSS float properties to position the divs on the left and right. Learning about responsive design techniques in CSS can help adjust the width of your divs based on different device widths.

Answer №2

One option could be utilizing the display block-inline feature or alternatively floating the image to the right. Another approach is using tables, although personally I find them cumbersome.

    #sidebar {
    margin-top:60px;
    float:right;
    width:350px;
    margin-left: 7%;

Ensure that the cumulative widths do not exceed the size of the parent container. Additionally, consider adding some padding to the right side of the image.

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

The user can witness the appearance of a scrollbar when utilizing the

Struggling to remove the scroll bar from my ion-scroll. Have tried various methods but nothing seems to work. Need assistance with this, please! Attempted using all attributes and even used CSS like ::-webkit-scrollbar with display: none;, which hides it ...

htmlcssionic-frameworkionic3

HTML5 on its own versus the dynamic duo of jQuery Mobile and AngularJS

We are in the process of creating a versatile mobile app that will work on multiple platforms using HTML5, JavaScript, and CSS. Our design approach includes utilizing Bootstrap for a responsive user interface, and Cordova to package the application for bot ...

htmlangularjsjquery-mobilecordova

Issue with an Angular filter for formatting a lengthy JSON string onto separate lines within an HTML document

Just starting out with coding and working in Angular, I'm trying to display JSON data from Firebase in HTML. Here's the specific call I'm using: <p>{{workout[0].box.info.training.strength.exercise[1].movement.freetext }}</p> Th ...

javascripthtmljsonangularjs

The Date Picker pops up automatically upon opening the page but this feature is only available on IE10

There seems to be an issue with the date picker opening automatically on IE10, while it works fine in Firefox where it only appears when you click on the associated text box. Does anyone have insight into why this might be happening specifically in IE10? ...

javascriptjqueryhtmlinternet-explorer

Content creator: Enhancing HTML search functionality using parameters

Hey there, I'm facing an issue. I created a template on my Blogger site and I need to search for text with a specific label using this URL: www.my_blog.blogspot.com/search?q=label:Printers+SearchText This is the code I have: <form action=&ap ...

htmlblogger

Unexpected PHP Error Thrown

Every time I run this code, I encounter the following error message: Notice: Trying to get property of non-object in C:\wamp\www\HoneysProject\function.php on line 1178 The error pertains to this specific line of code: $number_ph ...

phphtml

The Challenge of Implementing Jquery in Internet Explorer

Having troubles with Jquery in IE, the code is not working. Can anyone assist me? Please check this on IE and FF (or opera, safari, chrome), select a state, and you'll notice that clubs load but do not appear in IE while they show up in FF. Your hel ...

jqueryhtmlajax

Using the CSS property `transform:scale(2,2)` causes an image to suddenly appear in the

Currently utilizing Joomla 3.3, I am seeking to enlarge an image on mouseover. The html code for the image is as follows: <img class="enlarge" style="float: right; margin: 10px; border: 5px solid black;" title="Chapter 1: Physical Differences" src="im ...

htmlcsstransformscalez-order

Attempting to bind an input parameter using NgStyle in Angular version 2 and above

Issue: I am in need of a single component (spacer) with a width of 100% and a customizable height that can be specified wherever it is used in the HTML (specifically in home.html for testing): number 1 <spacer height="'200px'"></spa ...

javascripthtmlcssangularbinding

Hover functionality for the border animation is disabled, but the SlideToggle feature is operating smoothly

I am interested in changing the right border color of a DIV when another one is hovered over. I had to use a unique solution to make slideToggle work, so I assume this will require a different approach as well. Below is the detailed code: $(document).rea ...

jqueryhtmlcolorsjquery-animateborder

The Radio button and Checkbox values are causing an issue where the Radio button is continuously summing upon clicking without a limit. Why is this happening? Check out

I'm currently stuck in a function and believe it would be helpful for you to guide me along the correct path. My goal is to sum the values of checked boxes with the values of checked radio buttons. However, the radio values are continuously accumulat ...

javascripthtmlcsscheckboxradio-button

Tips for defining the width of columns that adapt to different screen sizes in Bootstrap version 4

Utilizing Bootstrap 3, I can effortlessly create a responsive table with adjustable columns using the grid system. Additionally, I have the ability to hide certain columns on smaller devices. For instance, consider this example where the table consists of ...

csstwitter-bootstrapresponsivenessbootstrap-4

What steps do I need to follow in order to replicate the layout shown in this

I am struggling with creating a layout in CSS that resembles the one shown in this photo: enter image description here Here is the HTML structure I have, but I can't figure out how to style it properly. <ul class="list"> ...

htmlcsslayout

Displaying the loading image only on the first result within a while loop

When a submit button is clicked on any result, the loading image below the button displays only for the first result in the while loop. For example, if I click the submit button on the first result, the loading image shows below it. However, when I click t ...

javascriptphpjqueryhtmlajax

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

Learn the process of creating various themes with Tailwind CSS

When exploring Tailwind CSS, it appears that specific colors need to be specified in classes like this: <div class="bg-yellow-200 dark:bg-gray-800"></div> However, I am interested in offering 10 different themes for users to choose f ...

htmlcsstailwind-css

Displaying the numeric value from a MySQL database in a textbox

In my code, I utilize the following segment to populate a database table where each row contains a button with the label "Load". while($row=mysqli_fetch_array($result)) { echo" <tr id='rowNum'> <td >".$row['No.'] ...

phphtmlmysqlbuttontextbox

"Implementing CSS inline styles for improved appearance on a Safari browser when visiting

Having some trouble using CSS to create rounded corners on my Facebook fan page. Everything works fine except for Safari browser. I've tried inline styles and a separate stylesheet, but no luck. Any help would be appreciated. My CSS for rounded corne ...

htmlcssfacebook-page

Looking to display a div with both a plus and minus icon? Having trouble getting a div to show with left margin? Need assistance hiding or showing div text

Can someone please review this source code? Here is the demo link: http://jsfiddle.net/bala2024/nvR2S/40/ $('.expand').click(function(){ $(this).stop().animate({ width:'73%', height:'130px' }); $( ...

javascriptjqueryhtmlcss

Customizing PrimeReact Styles

I've been on a quest to find the perfect solution for customizing the default 'Nova' theme used in Prime React. While I know there is a theme designer available for purchase, I'd prefer not to go that route. In the past, I found myself ...

htmlcssreactjssassprimereact