What is the ideal width for CSS div containers?

Feel free to take a look at our "About Us" and "Contact Us" pages here.

I'm struggling with aligning my DIV containers properly. It's the first time I'm working with DIV containers - my last website was table-based and created using Golive!

The issue is simple - I want a 250x250 image on the left, with text wrapping around it on the right and below (x3). The entire content should be centered in the middle of the page, with a maximum width of 1170 px. I can't figure out where I've made a mistake.

Similarly, on the Contact Us page, my 3 DIV containers are stacking vertically instead of spreading across the screen evenly at 33% each. Everything looks fine in Dreamweaver live view but doesn't translate well in Chrome once uploaded.

I'm sure it's something basic that I'm missing. Any help or guidance would be greatly appreciated!

htmlcsstwitter-bootstrap

Answer №1

The issue lies in the HTML code below

the specific div for Aviation & Automotive

<div class="col-xs-6 col-sm-6 col-md-3 templatemo_col12 templatemo_margintop10">

To resolve this, replace the entire div with the following code 

<div class="row">
    <div class="col-xs-6 col-sm-6 col-md-3 templatemo_col12 templatemo_margintop10">
        <div class="item project-post">
            <div class="templatemo_about_box">
                <div class="square_coner">
                    <span class="texts-a"><i class="fa fa-paper-plane"></i></span>
                </div>
                Aviation &amp; Automotive
            </div>
            <a href="about-us.html"></a><div class="col-xs-6 col-sm-6 col-md-3 hover-box">
                <a href="about-us.html"></a>
                <div class="inner-hover-box">
                    <p>Repairs, maintenance and add-ons.  We specialize in unique projects.</p>
                </div>
            </div>
        </div>
    </div>
</div>

https://i.sstatic.net/GuBL3.png

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 cube mesh is failing to render inside the designated div

I created a Torus and Cube Mesh in my scene, but I want the cube to be positioned at the bottom right corner of the screen. Here's what I tried: <div style="position: absolute; bottom: 0px; right:0px; width: 100px; text-align: center; "> & ...

javascriptcsshtmlthree.js

Sending both the minimum and maximum slider values to PHP using POST can be achieved by formatting the data correctly

I am attempting to transmit the minimum and maximum values to PHP using submit through a dual slider bar The static page makes a request to the server-side PHP code <?php include('server/server.php') ?> Below is the JavaScript code ...

javascriptphpjqueryhtml

Disabling the past dates on a date picker based on the selected date from another date picker

Is it possible to disable past dates in the End Date picker based on the selected date in the Start Date picker? For example: If I choose 20th November 2019 as the Start Date, I want to prevent selection of any past dates in the End Date picker. <ht ...

javascriptjqueryhtmldatedatepicker

Unable to retrieve table header information when clicking on a table cell

My code is working perfectly, except for the fact that when I click on a cell, I cannot retrieve the table header text. Retrieving the row text works fine based on the code. If I use Object.keys(data) inside the alert function to retrieve the data, it give ...

javascripthtmlcssreactjshtml-table

The challenge of handling overflow in CSS slide-in and slide-out animations

Trying to achieve a smooth animation where one list of tiles moves off screen as another list comes into view. Utilizing Angular's ng-for to iterate through a visible items array, causing only one list technically despite Angular's ngAnimate mod ...

htmlcssangularjscss-animationsng-animate

AJAX - Implementing a delay in displaying AJAX results

My search function uses AJAX to retrieve data from the web-server, and I am trying to implement a fade-in animation for each search result. I want the results to load and fade in one by one with a slight delay between them. Currently, it seems like all th ...

javascriptjqueryhtmlcssajax

Creating a line break in HTML using Bootstrap

Reference the source provided, specifically the red alert option. Here is an example: <div class="alert alert-dismissible alert-danger"> <button type="button" class="close" data-dismiss="alert">&times;</button> <strong> ...

htmlcsstwitter-bootstrap

What is the method to trigger a function upon opening an anchor tag?

When a user opens a link in my React app, I need to send a post request with a payload to my server. My current strategy involves using the onClick and onAuxClick callbacks to handle the link click event. However, I have to filter out right-clicks because ...

javascripthtmlreactjs

Is it possible to share deep links with just a hashtag?

I am currently developing a web application and I want to include social media buttons such as Facebook Like. I have tried using the HTML code/API provided by Facebook, AddThis, Shareaholic, ShareThis, but none of them seem to properly handle my deep link ...

htmlajaxfacebookdeep-linkingaddthis

Focus on styling a single theader element within a jQuery Data Table with CSS

Struggling to work with a dynamic Jquery Data Table that has 10 table headers. I am having difficulty adding a class or an Id in the code to the specific th element with the title 'Unused'. In my .css file, I attempted: [title~= Unused] { ba ...

jquerycssdatatablecss-selectors

Is it possible to repeatedly activate a function using onmousedown just like with onkeydown?

My goal is to have the onmousedown event trigger repeatedly when the left mouse button is held down, instead of just once upon clicking. Currently, it only fires a single time. wHandle.onmousedown = function (event) { console.log('mouse b ...

javascriptjqueryhtml

How can I arrange multiple images within a div to create a circular view?

How can I create a div block with multiple images positioned inside? I'm having trouble applying div CSS properties to the images, and also want them to be displayed in round shapes. ...

imagecssposition

Designating a class that applies to every Angular template that can be displayed using *ngIf

I have a specific CLASS called section that I want to apply to a DIV for rendering. Surprisingly, it functions as expected. <div *ngIf="decoded; then coordinates"></div> <ng-template #coordinates> <div class="section&q ...

htmlcssangulartemplates

Utilizing nested createHtmlOutputFromFile in Google Apps Script HtmlService to generate jQuery code

Embarking on a new journey, I am diving headfirst into the world of JQuery WebApp with Google Apps Script. Every day is filled with new discoveries and excitement as I immerse myself in learning to piece things together. Starting off with some examples an ...

jqueryhtmlgoogle-apps-script

Is it possible to add animation to an SVG filter to create a captivating rotating planet with color effects?

I've added a filter to my self-created SVG and I'm interested in animating it so that the colors move diagonally, giving the appearance of a spinning planet. Below is the code featuring my SVG and how I'd like it to begin with the blue colo ...

javascripthtmlcssreactjssvg

I am having trouble getting my HTML to properly link with my CSS while using Chrome OS

My website code is not linking with the CSS file <!DOCTYPE html> <html> <head> <link href="main.css" rel="slylesheet" text="text/css"> <title></title> </head> <body> < ...

htmlcssgoogle-chrome-os

Container-wrapper unable to contain images, overflowing despite using overflow:hidden property

I am currently working on a unique section for a website that includes a .container-wrapper element consisting of text and multiple images. The container is set to have overflow: hidden; in order to prevent any overflow issues. However, the images within t ...

javascripthtmlcssliquid

SVG with embedded fonts failing to display properly in web browsers

Within this SVG, there are two different font types being used: SymbolMT for the mathematical expressions and Hind-Light for the text. Both fonts have been defined within the @font-face section of the SVG. The font used for the math expressions appears a ...

csssvgfonts

I'm having trouble with aligning my input checkbox within the form

My form includes multiple checkboxes, but I am having trouble aligning them properly. <!-- Multiple Checkboxes (inline) --> <div class="form-row"> <label class="chkdonar" for="donarchkform-0">Yes, I want to donate to AMIAB</label> ...

css

Is there a way to toggle the slide effect of one 'div' without affecting another one?

Hey everyone! I am new to jquery and currently working on a project with two div elements that are slidetoggled. The issue I am facing is that when I open or close one div, the other div also moves along with it. I understand what is happening in the back ...

javascriptjqueryhtmlslidetoggle