What is the best way to align my HTML column using CSS?

I'm currently working on my high school project and as a beginner, I am facing difficulties with formatting a column to display my bio. I want it to look like the example below:

However, I am struggling to achieve this using my HTML and CSS code.

Here is my HTML:

<div class="row">
    <div class="column">
        <img src="photos.png" style="width: 320px;">
    </div>
    <div class="column" id="david">
        <h1>David Watson</h1>
        <h2></h2>
    </div>
</div>

And here is the CSS code for that:

CSS:

.column {
  float: left;
}

.row {
     margin-left: 350px;
     margin-top: 100px;
}

/* Clear floats after the columns */


h1 {
    font-weight: 10;
    font-style: italic;
}

By the way, this is how it appears:

htmlcss

Answer №1

To achieve a side-by-side layout for child elements, you can use the code .row{ display:flex }.

For more information on this, you can refer to https://www.w3schools.com/css/css3_flexbox.asp

.row {
      display:flex;
     margin-left: 350px;
     margin-top: 100px;
}
.column {
  margin:0 2rem;

}


h1 {
    font-weight: 10;
    font-style: italic;
}

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

What is the best way to prevent jQuery from counting sublists within a list?

Can anyone help me figure out how to count only the "root" steps in an HTML list using jQuery? I want to iterate through just the root steps and ignore the sub-steps completely. Currently, my jQuery script counts both the root <li> elements and thei ...

javascriptjqueryhtmlhtml-lists

Can tabs be created without the use of javascript?

I'm currently working on implementing a tabbed box layout, and while I've come across several tutorials that use JavaScript to switch between tabs, I'm wondering if there is a way to achieve the same functionality without relying on JavaScri ...

javascriptcss

Placing a small image on top of multiple images using CSS

I am facing a CSS issue and I need help with positioning a small image (using position absolute) like a warranty badge on top of larger images. The challenge is to ensure that the badge is fixed at the bottom left corner of each image, despite variations ...

javascriptcss

What is the best way to change a variable's type from string to integer in Javascript?

Check out the fiddle I created: https://jsfiddle.net/ajc100/vrzme0st/ I have been working on an insurance calculator (with fake numbers) using a form with radio buttons and dropdowns where the value of each selection is a number. Currently, I am able to d ...

javascriptjqueryhtmlinteger

Is there a way to automatically position my canvas beside my table when there is enough space on the screen, and stack them underneath each other if the screen

I am facing an issue with aligning a table containing data and a chart visualizing this data using Chart.js. The chart is displayed in a "canvas" element and I can't seem to get them positioned next to each other. I have tried implementing the follow ...

csshtmlresponsive-design

Having trouble implementing the center edge effect in this CSS design

Looking for help with CSS to center the edges of a family tree design. Has anyone experience in working on styling family trees? *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .tree { ...

javascripthtmlcss

PHP Verify that all variables contain no data

Looking for an efficient way to verify that all data submitted from a form to a PHP script is accurate. Code Snippet <?php $Name = $_POST['Name']; $ID = $_POST['ID']; $Submit = $_POST['submit']; $Reset = $_POST['rese ...

phphtmlformsvariables

How can I use JQuery to sum up the numbers within div elements?

Is there a way to automatically number the generated blocks? For example, the first block would display "1", the second "2" and so on. Below is my current code. Simply input the desired number of blocks in the input field. <!DOCTYPE html> <html ...

javascriptjqueryhtmlcss

What is the best way to import multiple data.js files into a React JS application?

Currently, I am working on a project where I need to load or input multiple data.js files into my React JS application. Specifically, I have dataCPU.js, dataGPU.js, and around 7 others. Here is the code snippet for reference: App.js import Header from &ap ...

javascripthtmlcssnode.jsreactjs

Scroll horizontally through the number field in Chrome

I have configured a number input field with the text aligned to the right. Scenario: While testing, I discovered that selecting the entire text or using the middle mouse button to scroll within the input field allows for a slight leftward scrolling of ab ...

javascriptjqueryhtmlcss

Render the template using the data retrieved from a function that was recently executed in Flask

While attempting to display a flask template using the output of a function, an error message pops up saying "y value is not defined" The function in question: functiona (x): y=x+1 return y My flask application snippet: @app.route('/exampl ...

pythonhtmlflask

Step-by-step guide on how to animate the title for each slide separately

I have successfully created a custom jQuery slideshow that functions as intended. The only remaining task is to animate the caption within each slide. I would like each caption to correspond with its respective slide, but currently all of the captions resp ...

javascriptjqueryhtmlcss

Using CSS to align the position of a div with the last word position of an h4 element

Trying to figure out how to position a div at the end of an h4 text element has been challenging. When the h4 text is on a single line, it's easy to place the div correctly. However, things get complicated when the text spans multiple lines. In that c ...

htmlcsstextposition

If the value is less than 6, change the color of a cell in a different table to red

I am in the process of developing a bike reservation system that collects information from a form and stores it in a database (completed). The stored information is then displayed in a table (completed), with the feature pending to automatically delete dat ...

phphtmlcssmysql

The MUI component with hideBackDrop={true} is preventing me from clicking outside of the Drawer component to close it

I implemented a Drawer component which opens when an icon on the Map is clicked. The drawer menu appears along with a backshadow that drops over the map. Interestingly, clicking on the map while the backshadow is displayed closes the drawer without any i ...

cssreactjsmaterial-uimui-datatablemui-x

The tooltip for the svg icon is not appearing

Is there a way to apply the tooltip from this tutorial to an SVG info icon like in this codepen? I tried adding the classes to the svg, but the tooltip doesn't show. How can I make the tooltip work on the SVG info icon? Thank you. body { backgrou ...

htmlcss

What is the process for loading my new fonts into an HTML document?

I am trying to incorporate two specific fonts, bigsmalls-bold and lft-etica-web, into my CSS and HTML code. Unfortunately, I have been unable to find a way to download these fonts directly. The only information I found was a JavaScript code snippet on I a ...

javascripthtmlcssfonts

Error: Syntax error detected. Unexpected blank space found. Expecting either "-" symbol, identifier, or variable

Error: Syntax error: unexpected '' (T_ENCAPSED_AND_WHITESPACE), expecting '-' or identifier (T_STRING) or variable (T_VARIABLE) or number (T_NUM_STRING) in C:\xampp\htdocs\Source Code\displaysalesdetailed.php on line ...

phphtmlcssbootstrap-4error-handling

There seems to be an issue with the functionality of the .ht

I am facing an issue with my htaccess file while trying to implement URL rewriting. I am attempting to change the URL from "quotewebster.com/topics.php?topic_id=12" to this: "quotewebster.com/topics/12/" In my htaccess file, I have added the following co ...

phphtml.htaccess

How can I automatically populate a DropDown when the page loads?

Can someone help me with populating a DropDown control on page load using AJAX? I have working code, but I am unsure which event to use. ...

phphtmlajax