Having trouble aligning and resizing text and divs accurately

Hello, I'm having trouble centering my text within a div and fitting three divs inside my content area. Here is the code snippet:

HTML


<div id="content">
    <div class="latest">
        <p>Gentlemen, these are my latest works</p>
    </div>
    <div id="works">
        <div class="one"> 
            <a href="myworks.html" class="title">Lineage 3 Online</a>
            <div class="prev1"></div>
        </div>
        <div class="two"> 
            <a href="myworks.html" class="title">Lineage 3 Online</a>
            <div class="prev2"></div>
        </div>
        <div class="three"> 
            <a href="myworks.html" class="title">Lineage 3 Online</a>
            <div class="prev2"></div>
        </div>
    </div>
</div>

CSS


    .content {
        width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }

    .latest {
        text-align: center;
        font-family: "Open Sans", Helvetica, sans-serif;
        color: #777;
        text-transform: uppercase;
        letter-spacing: 5px;
        font-weight: bold;
        font-size: 18px;
        padding-top: 25px;
        padding-bottom: 5px;
        border-bottom: 2px solid #DADADA;
    }

    #works {
        margin-top: 8px;
        border-top: 2px solid #DADADA;
    }
    
    /* Styles for div.one, div.two, div.three, a.title, and div.prev1 go here */

    ...

I'm still learning HTML5 and CSS, so apologies if this question seems basic.

csshtmltextcenter

Answer №1

If you happen to find an extra closing tag in each of the divs directly under the #works div, take it out for a cleaner code structure.

To center the text within the div#works, simply add text-align:center to its CSS:

div#works {
    margin-top: 8px;
    border-top: 2px solid #DADADA;

    /* Add this */
    text-align: center;
}

The children of the #works div will automatically inherit the text-align property.

Your div elements may not be aligning correctly due to missing float on the middle one and inconsistent margins. Consider creating a more general rule that applies only to the children of the #works div:

#works > div {
    float: left;
    width: 300px;
    height: 300px;
    margin-top: 10px;
    border: 1px dotted #333;
}

Using the > selector ensures that only the immediate children of the #works div are affected by this rule.

For reference, check out http://jsfiddle.net/jfUxA/3/.

Lastly, consider omitting the element name prefix from your id selectors as it is redundant and unnecessary when targeting unique id attributes.

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 was the recommended dimensions for CSS containers in 2018?

In the realm of responsive layout design, what is the recommended size for a max-width container as of 2018? My current choice is to use 1140px, which I find works well with the standard screen size of 1366px. ...

cssuser-interfaceresponsive-design

javascript mobile nav event

My website utilizes a bootstrap feature for mobile devices where a left sidebar pops up when clicking a button. I am not very familiar with bootstrap, but I would like to link a javascript event to determine if the left sidebar is visible. How can I achiev ...

javascripthtmlcsstwitter-bootstrap

What would you suggest as a more effective method for preventing content overlap during multi uploads?

Recently, I was working on a Wordpress site and used the Ninja Forms plugin to create a form. One of the challenges I encountered was styling the file upload button. After some research, I came across a tutorial that provided a great solution that worked a ...

jquerycssformsfile-upload

My Tailwind CSS toggle button disappears in dark mode, why is that happening?

<button aria-label="Toggle Dark Mode" type="button" className="lg:inline-flex lg:w-40 md:w-screen p-3 h-12 w-12 order-2 md:order-3" onClick={() => setTheme(theme === 'dark' ? &ap ...

javascripthtmlreactjsnext.jstailwind-css

How can I ensure that my image remains responsive and aspect ratio-friendly?

Is there a way to accomplish this magical effect? I find myself in a similar situation. I require an image that remains centered while adjusting to fit the screen, all while maintaining its aspect ratio. ...

htmlcssimageaspect-ratio

Clickability issue with searchbar results caused by onBlur event

My searchbar functionality includes showing results in a dropdown list when the user searches. However, I am facing an issue with the onBlur event that changes the display of the list to none when the user clicks away from the search box. The problem aris ...

javascripthtmlreactjs

Angular error message: Trying to access the property 'name' of an undefined object leads to a TypeError

I'm having trouble phrasing this question differently, but I am seeking assistance in comprehending how to address this issue. The error message I am encountering is as follows: TypeError: _co.create is not a function TypeError: Cannot read property ...

htmlangulartypescript

Mastering the Art of jQuery: Easily Choosing and Concealing a Div Element

I'm currently facing challenges in removing a div upon successful AJAX completion. The issue I'm encountering is that the word "Added" appears twice after success, indicating that I am not properly selecting the two divs containing it. Any sugges ...

javascriptjqueryhtmlcss

What is the best way to incorporate a <li> view cap within a div element using JavaScript?

Currently, I am attempting to implement a dynamic <li> view limit within the content of a div. My goal is to display only 3 <li> elements each time the div content is scrolled. Although not confirmed, I believe this example may be helpful: ...

javascriptjqueryhtmlcss

Positioning MDL cards in HTML documents

Seeking guidance on positioning MDL cards alongside existing text. I've attempted various methods without success so far, and the desired outcome has not been achieved. The goal is to have text aligned to the left (which is currently satisfactory) wi ...

htmlcssmaterial-designcss-positionmaterial-design-lite

Efficiently linking styles through computation in Angular

So I've been working with Angular5 and I figured out how to bind an HTML element's style to a Boolean value. However, I'm struggling to find a way to do this for multiple styles simultaneously. For example, I have this code snippet that wor ...

htmlcssangular

The intricate scripting nestled within the jQuery function

When using jQuery, I am looking to include more codes within the .html() function. However, I also want to incorporate PHP codes, which can make the writing style quite complex and difficult to read. Is it possible to load an external PHP/HTML script? fu ...

javascriptjqueryhtmlajax

Maintain correct aspect ratio when zooming in the body

I'm facing a challenge with my single-page web application that has fixed width and height. It doesn't scale properly to fit the page at all times. Scaling based on its width works fine, but I want to achieve scaling from both width and height w ...

jquerycsszoomingaspect-ratio

Preventing special characters, numbers, and spaces from being used as the first character in a word in HTML with regular expressions

Is there a way to restrict users from inputting special characters, numbers, and spaces only in the first place of a word using regex in HTML? <label><span>Current Carrier</span></label> <input name='Current Carrier' t ...

javascriptc#htmlcssregex

Enhancing Application Views in ExtJS Classic 7.3.0 using .scss Style Sheets

Referencing the guidelines provided in this resource for theming: In order to create CSS rules specific to an application view, you need to generate an .scss file within the same directory and with a matching base name as the view. For instance, if you w ...

cssextjssasssencha-architect

Accurately replicate the Logout functionality of asp:Login within the siteMap

How can you effectively integrate/simulate the Logout feature in asp:Login for a siteMapNode? <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false"> <AnonymousTemplate> <%--[ <a href ...

c#htmlasp.netsitemaplogout

Creating a custom dynamic favicon and title in NextJS

Hello there! I am in the process of creating a web constructor. Currently, my application functions as follows: I verify the URL that the user is visiting (such as localhost:3000) I identify their project name within my web constructor (localhost:3000 -&g ...

javascripthtmlcssnext.jsseo

determining the overall page displacement

I'm working with this code and I need help using the IF condition to check if the total page offset is greater-than 75%. How can I implement that here? function getLocalCoords(elem, ev) { var ox = 0, oy = 0; var first; var pageX, pageY; ...

javascripthtml

The div element's width does not match the width of the textbox

I attempted to implement the following code in HTML. However, I am puzzled as to why the text box and div width are not the same size. Here is what I have experimented with. <style> .test { border:1px solid red;width:100px;height:30px;padding:3p ...

htmlcss

Guide to importing a scss file into a scss class

Is there a way to apply a different theme by adding the "dark-theme" class to the body? I've attempted the following implementation: @import '../../../../node_modules/angular-grids/styles/material.scss'; .app-dark { @import '../../. ...

cssangularsass