Creating a Vertical Stack of Divs Using HTML and CSS

I've attempted various methods to align the links vertically in the left-most column, but without success.

Any suggestions or advice would be greatly appreciated!

http://jsfiddle.net/adRuz/112/

.box {
    background: #E8E8E8;
    border-radius: 8px;
    padding: 10px;
    -moz-box-shadow: 0 0 30px black;
    -webkit-box-shadow: 0 0 30px black;
    box-shadow: 0 0 30px black;
    font-family: Georgia;
}

.col1 {
    float:left;
    width:25%;
    height: 500px;
}
.col2 {
    float:right;
    width: 70%;
    height:500px;
}

.orange-heading {
    color: #0000FF;
    font-size: 40px;
}

.title_link {
    font-size:20px;
    clear:left;
}

Answer №1

After experimenting with the <br> tag, I found it to be quite effective.

I also noticed a slight error in the link where instead of using class, it was written as clas, resulting in the font size not being correctly displayed!

http://jsfiddle.net/aB4rD/

Hopefully, my explanation was beneficial to you!

Answer №2

Include the following line in your code:

.box a { display:block; }

By adding display:block;, the element will begin on a new line and expand fully from left to right, achieving the desired effect.

Check out the demo on jsFiddle.

Answer №3

Do you want to design a vertical menu? If so, you can experiment with the following example code:

Check out the Sample Code here

Here is the markup:

<nav>
    <ul>
        <li><a href="#" clas="title_link">Section Title 1</a></li>
        <li><a href="#" clas="title_link">Section Title 2</a></li>
        <li><a href="#" clas="title_link">Section Title 3</a></li>
    </ul>
</nav>

As for the CSS styling:

nav ul {
    list-style: none;
}

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

Bring a div box to life using AngularJS

Struggling to animate a div-Box in AngularJS? Despite trying multiple examples, the animation just won't cooperate. I'm aiming to implement a feature where clicking on a button triggers a transition animation to display the search form. I under ...

Issue with rendering images on Bootstrap-Vue card component

In the process of creating a static website with Vue.js, I am attempting to incorporate a basic Bootstrap card using Bootstrap-Vue. Unfortunately, I am facing an issue where the image does not display when utilizing the b-card component with the img attrib ...

Having difficulty adjusting the width of a div element

I've been struggling to adjust the width of the div assigned with the colors class, whether in percentage or pixels. var colors = ["RED", "GREEN", "BLUE", "YELLOW", "PURPLE"]; for (var h = 0; h <= 4; h++) { for (var i = 0; i <= colors.lengt ...

The bubble dialogue box in my picture

Looking to create a panel with images that, when clicked on, display an info window similar to Google Map's pin maker. When you click on an image, a balloon should appear containing additional information. Check out this example <a id="infowindow ...

Struggling to create a BMI Calculator using JS, the result is consistently displaying as 'NaN'

Having trouble creating a BMI Calculator using JavaScript. The issue I'm facing is that the calculation always returns 'NaN'. I've tried using parseInt(), parseFloat(), and Number() but couldn't solve the problem. It seems that the ...

The error message InvalidCharacterError is displayed when the attempt to create a new element using the 'createElement' method on the 'Document' object fails. This is due to the tag name provided ('/static/media/tab1.fab25bc3.png') not being a valid name

Hey everyone! I'm new to using React and I decided to try cloning Netflix by following a tutorial on YouTube. However, I've encountered an issue with rendering an image in a functional component. The error message I'm receiving is as follow ...

Avoiding leaps through the use of dynamic pictures?

Currently, I am implementing the picture element along with srcset to download the same image but in varying resolutions depending on the screen size of the device. The image has a style of max-width: 100%, causing it to shift the content below when downl ...

Discovering specific keywords within HTML tags and performing replacements using jQuery

I am searching for specific strings within my HTML code, and if I find them, I want to replace them with nothing. For example: HTML: <img src=`javascript:alert("hello ,world!")`> My goal is to locate keywords like javascript, alert, etc, within H ...

Retrieve webpage content using an ajax request in JavaScript

I'm working on an HTML page with an Ajax call to load table content. <html> .... <script sec:haspermission="VIEW_NOTE" th:inline='javascript'> require(['app/agent/viewGlobalAgent'], function (){ ...

Combining all elements of my application into a single HTML, JS, and CSS file

My AngularJS app has a specific structure that includes different directories for each component: theprojectroot |- src | |- app | | |- index.html | | |- index.js | | |- userhome | | | |- userhome.html | | | ...

The footer is supposed to be at the bottom, but unfortunately, the clear float isn

Today seems to be a rough one without enough coffee, as I'm struggling to remember how to do this I am trying to achieve the following layout: header content float float footer The content section contains two floating elements. The problem is ...

issue arising where the table's border is not displaying

I'm confused about why the border of the first tbody tr's td is not visible. https://i.stack.imgur.com/Fwlv7.png I can't see any reason why the border is not showing up. Here's what I've figured out: If the natural height of th ...

Easy PHP navigation options

Creating a basic PHP page with includes is proving challenging when it comes to navigating URLs using '../' to find the correct path to the folder. Is there a straightforward way to set up a simple PHP navigation without involving MySQL or other ...

Issue with aligning content vertically in a Bootstrap 3 div

My attempt at vertically aligning text within a div using the following code snippet did not yield the desired result (see fiddle): <div class="container-fluid"> <div class="row"> <div class="col-xs-2"> This conte ...

The filter on the mobile version is not displaying correctly

When I select a category in the input filter, only items with the same category are displayed when clicked. However, when I click on "Others" on the desktop version, only rows with that category are shown, but on mobile after resizing and filtering, nothin ...

Configuring ng-options with personalized indices

I am a beginner learning AngularJS and I'm working on setting up ng-options with unique indexes. In my tables, I want to use the Primary Key as the index. For example, if the Primary Keys are 1, 3, 4, 5, I only want those indexes in my select. First ...

CSS :hover activates only when the mouse is in motion

Looking at a simple example I put together: HTML <div id="sample"></div> CSS #sample { width:400px; height:400px; background-color:green; display:none; } #sample:hover{ background-color:red; } It's a hidden DIV tha ...

The video.play() function encountered an unhandled rejection with a (notallowederror) on IOS

Using peer.js to stream video on a React app addVideoStream(videoElement: HTMLVideoElement, stream: MediaStream) { videoElement.srcObject = stream videoElement?.addEventListener('loadedmetadata', () => { videoElement.play() ...

I am looking to upload an image to the database using ajax or any alternative method

I need assistance in uploading an image to a Spring Boot backend via AJAX or any other method. Below is the img tag and form I have implemented, along with an AJAX request to send form data. How can I include the image in this process? AJAX request (exclu ...

How can I properly integrate jQuery libraries, along with CSS, in a create-react-app project?

I'm currently working on incorporating the select2 jquery library into my React application, which was created using create-react-app. After adding jquery and select2 to my package.json file, I was able to get the javascript functionality to work pro ...