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

Error: TweenLite has not been recognized

/justincavery/pen/mPJadb - this is a link to CodePen After copying the code from CodePen and running it, I encountered an error: "Uncaught ReferenceError: TweenLite is not defined". The image only draws once and there is no animation unless I press "F5 ...

javascripthtmlcss

What could be the reason behind the improper display of JavaScript for ID overlay2?

Why is it that when I try to have two overlays with different messages display upon clicking buttons, they both end up showing the same message? Even after changing the ID tag names, the issue persists. Can someone shed some light on what might be causin ...

javascriptjqueryhtmlcss

Is there a way to view the full HTML source code of this page by selecting the "more" button?

Exploring a web page related to forex trading can be an interesting experience. The website provides a list of live trade records, which can be accessed here: Typically, I use Python along with BeautifulSoup to extract information by reading the source co ...

pythonhtmlparsing

Stop the form submission until validation is complete

I'm currently working on a form and encountering some validation issues. HTML: <form id="regForm" class="form-group" method="POST" action="signup.php"> <div class="col-md-12"> <h2>Job Pocket</h2> </div> <di ...

javascripthtml

The compilation process in my gulpfile is not successful

I have spent the past few days trying to figure out how to solve my problem but haven't had any luck. My gulpfile is not compiling my css even though it should be. Originally, my gulpfile was set up for sass files and everything worked perfectly. Howe ...

csssassgulp

JavaScript CheckBox Color Change Not Functioning

Hello, I am currently experimenting with the checkAll function. When I click on the checkAll checkbox, it should select all rows and change their background color accordingly. Below is the JavaScript code I am using: function checkAll(objRef) { v ...

javascripthtmlcssgridview

In the Bootstrap Grid system, all posts are aligned to the left side

I have created a gallery with Bootstrap in React.js. The posts are currently displayed using the bootstrap grid system, however, all posts appear on the left side and I am struggling to center them. Any ideas on how to achieve this? After applying justify ...

htmlcssreactjsbootstrap-4

Eliminating white space - A CSS and HTML page with no room for gaps

After finally getting my website up and running using style.css, I am faced with the following CSS code: html { height:100%; } { position: relative; z-index: 0; width: 100%; left: 0; top: 0; cursor:default; overflow:visible; } body { ...

htmlcss

Unique WordPress Loop Design (Grid/Row)

Looking for a custom Wordpress post loop that will display posts in a specific format. The desired layout includes two posts in each "col" div, both contained within a "row" div: <div class="row cols2"> <div class="col left"> <a href="#"> ...

phphtmlwordpress

Leveraging the capabilities of the Freshdesk API

Has anyone had any experience utilizing the FRESHDESK API specifically for creating tickets? The documentation states the following: Request URL: domain_URL/helpdesk/tickets.xml Request method: POST <helpdesk_ticket> <description>Disk fai ...

javascripthtmlxmlapifreshdesk

Navigation through Image Filters

Everything seems fine with my code, but when I click on the navigation links, they direct me to index.html or the landing project instead of filtering the images. How can I modify the links to properly filter the images? This is the Javascript and html co ...

javascripthtml

Enhance the functionality of your website by implementing a zoom feature

I am looking to dynamically change the CSS of a div using jQuery when it is clicked. The challenge I am facing is that there are multiple divs with the same class and I am unable to modify their classes as they are created dynamically using PHP. <div ...

jqueryhtmlcss

What is the method for activating -webkit-animation/transition-property for :before and :after pseudo elements?

Is there a way to activate the -webkit-animation for :before and :after pseudo elements? It seems that in this demo http://jsfiddle.net/4rnsx/, the animation is not working for :before and :after elements. I am attempting to make it work using Mootools ...

csswebkitcss-transitionspseudo-element

How can I restrict input to only numbers and one decimal point using JavaScript?

The following code I have is not functioning as expected: function validateInputValue(element) { var regex = /\D$/i; // Important: avoid white spaces in password if(regex.test(element.value)) { alert("Please check your input format"); e ...

javascriptphpjqueryhtml

Learn the trick to making specific words appear bold in Select2 by changing the font style

I'm currently working with select2 version 4.0.1, and I have a requirement to modify the font for specific words. In particular, I want to display codes AK and HI in a different/bolder font style, similar to the example below: <select id="select2" ...

jquerycsshtmljquery-select2

The method provided by the FullScreen API is not effective in cancelling the fullscreen mode

After testing my code in Google Chrome, I encountered the following error message: Uncaught TypeError: Object #<HTMLDivElement> has no method 'webkitCancelFullScreen' Interestingly, I also received a similar error while running the code i ...

javascripthtmlfullscreen

Customizable Designs in Oracle Application Express version 4.2

In my work supporting the organization, I am using APEX 4.2 to create a Training Calendar. While I am not a DBA or programming expert, I have been learning through trial and error. The calendar is already set up, but I am looking for a way to customize ho ...

csssqloracle-apex

Avoid making the check mark disappear in an SVG animation

After perfecting my CSS animation, I have the circle looping around to complete its shape while a check mark fills in the middle with a slight delay. Once both shapes are completed simultaneously, the check mark disappears. The reason for the disappearing ...

csssvgcss-animations

An error occurs when attempting to echo empty values from an array due to the "undefined index" issue being

Answering this question seems quite straightforward. Let me outline what needs to be done. I possess an array $polarity_array The array holds values in the form of HTML tags that present images. However, there are some empty values in the array because ...

phphtmlarrays

Safari and mobile browsers do not support animation functionality

My animation works flawlessly in Chrome, but it's not functioning properly on Safari. Quite odd, right? Here is the code snippet: <header> <div class="ripple-1"></div> <div class="ripple-2"></div> ...

css