How about: "Insert a line break inside a div element"

Question

How about: "Insert a line break inside a div element"

My goal is to have 3 icons positioned side by side that will float left if the window shrinks. Under each icon, I plan to include some text. Below you can see that I've made progress on this layout.

.icons {
BORDER-TOP: black 1px solid; 
  HEIGHT: 100px; 
  BORDER-RIGHT: black 1px solid; 
  WIDTH: 100px; 
  BORDER-BOTTOM: black 1px solid; 
  FLOAT: left; 
  BORDER-LEFT: black 1px solid
}

<div class="icons">div 1</br><a>some text</a></div>
<div class="icons">div 2</div>
<div class="icons">div 3</div>

When trying to implement this in jsfiddle, I encountered that the  tag appears as invalid. Is there a more valid or efficient way to achieve this layout?

http://jsfiddle.net/kp950/mum68pwv/

html css

Answer 1

Answer №1

To ensure your text elements take up the full width, simply add display: block.

a { display: block; }

This will make each element fill the available width of its container and move subsequent elements to a new line.

Check out this example for reference: http://jsfiddle.net/mum68pwv/4/

Answer 2

To ensure your text elements take up the full width, simply add display: block.

a { display: block; }

This will make each element fill the available width of its container and move subsequent elements to a new line.

Check out this example for reference: http://jsfiddle.net/mum68pwv/4/

Answer 3

Answer №2

An error is popping up in jsfiddle because of the incorrect linebreak syntax you're using.

Instead of , make sure to use  .

UPDATE FOR 2020/HTML5

In HTML5, self-closing tags are no longer necessary (although browsers can still interpret them), so just opt for   instead.

Answer 4

An error is popping up in jsfiddle because of the incorrect linebreak syntax you're using.

Instead of , make sure to use  .

UPDATE FOR 2020/HTML5

In HTML5, self-closing tags are no longer necessary (although browsers can still interpret them), so just opt for   instead.

Answer 5

Answer №3

Don't use . Instead, opt for either   or  

The tag   is valid, while  is not.

Example:

<div class="icons">div 1
<br>some text
</div>
<div class="icons">div 2<br>some
<br>some text
</div>
<div class="icons">div 3
<br>some text
</div>

By the way,

<a> stands for anchor tag and isn't ideal for small elements on your webpage. Consider using  instead for better efficiency.

Answer 6

Don't use . Instead, opt for either   or  

The tag   is valid, while  is not.

Example:

<div class="icons">div 1
<br>some text
</div>
<div class="icons">div 2<br>some
<br>some text
</div>
<div class="icons">div 3
<br>some text
</div>

By the way,

<a> stands for anchor tag and isn't ideal for small elements on your webpage. Consider using  instead for better efficiency.

Answer 7

Answer №4

There seems to be a small mistake in the use of your   element

For example, instead of

<div class="icons">div 1</br><a>some text</a></div>

You should have

<div class="icons">div 1<br><a>some text</a></div>

Answer 8

There seems to be a small mistake in the use of your   element

For example, instead of

<div class="icons">div 1</br><a>some text</a></div>

You should have

<div class="icons">div 1<br><a>some text</a></div>

How about: "Insert a line break inside a div element"

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Incorporate text directly into Bootstrap select input on a single line

Guide to positioning Navigation Bar in the center

What is the process for displaying objects within an object using HTML?

Yet another inquiry about the inexplicable failure of my jQuery Ajax in Internet Explorer

An irritating bug causing a 1px difference in Chrome 21

Fixed Navigation Menu on Top with Specific Width Size

Combining two HTML tables using jQuery/JavaScript

Using flex and align properties to position two elements on the right and one on the left is a common layout challenge

How can I implement a jQuery slide down effect for a specific individual instance?

How can we convert unpredictable-length JSON user input into well-structured HTML code?

Display a featherlightbox popup when the page loads

What could be causing disparities in the padding of certain table cells compared to others?

How can I create my own unique scrolling behavior in JavaScript?

What could be causing the misalignment of a button within a Bootstrap navbar?

What is the best method for showing information beneath each tab?

I have an HTML table with multiple cells containing inner HTML tables. I have implemented a function along with buttons to filter the main table, excluding the inner tables

Can I use javascript/jquery to alter the direction of text in each line?

Tips for showcasing colorful XML script within an HTML text field

The object in three.js disappears from the scene but remains visible

Enable and disable modal popup functionality in ng-bootstrap for Angular 5