Css all div in one line

CSS block elements on a line

What’s the most common way to deal with a series of block elements that need to be on a line (if javascript needs to be able to modify their widths, for example)? What are the pros and cons to applying float:left to each of them vs. using positioning to place them?

5 Answers 5

Well, if you’re not too concerned with older browsers (I’m looking at you, IE6) the best way here is to go with

Basically, it creates a box-model element without clearing before or after it, so it remains in the line. Every modern browser interprets it well.

try firefox.. it also has issues with this property.. if I’m not mistake there is a -moz-inline-block or something for this..

Just today I did some stuff using it (FF3) and had no problems whatsoever, looked he same in FF, Opera, Chrome and IE7

Bad idea, there are simple ways to implement what he’s talking about without using sketchy elements that aren’t supported in many browsers (IE6 is still a major browser despite how we all feel about it)

IE6 can supoort it correctly with minor adaptations (quirksmode.org/css/display.html), but as many things in webdesign, the way to chose to solve a problem is directly related to the public of the site. That’s why I said that he could use it if older browsers don’t concern him.

Floating would be my choice, but it really depends on what you wish to achieve. If you can provide a more specific example I would be able to give you a clear reason as to what and why I think you should use. However here is a brief set of pros and cons that I have come accross (I’m assuming that by positioning you mean absolute positioning):

• very precise positioning in relation to the next ancestor marked as position relative — allows for great flexibility
• allows for elements to be in a different order visually than they are in the DOM

• Harder to line up with other elements since the positioned element is no longer in the document flow and also because of the level of precision required.
• Other elements ignore the absolutely positioned element which means you could have a potential overlap, unless you account for the minimum and maximum size of the positioned element
• harder to implement a footer if you are using absolute positioning for your columns.

• really easy to construct simple and advanced layouts
• no footer problem
• no worrying about precision, browser takes care of that for you
• parent container stretches

• Lots of pitfalls for those less experienced with float layouts that may lead to many questions being asked on SO 🙂

As to the clear:both element that Sebastian mentioned, There’s a simple way around that. Lets say you have a container div and 2 floated divs inside.

if you were to run this code you would notice that the container div (the magenta coloured one) is only a single pixel high whereas the floated divs were correct — which is the problem Sebastian mentioned. Now you could take his advice and add a br or float the container which would not be very semantic — so here is a slightly more elegant solution. Just add overflow:hidden; to the container div like so:

Now your container should wrap the floated divs properly.

Источник

5 Ways to Display Divs in One Line Using CSS

Learn how to display div elements in one line using CSS with these 5 methods. From inline-block to float, choose the best approach for your design needs.

When working with HTML and CSS, it’s common to want to display div elements in one line. By default, divs are block elements that are oriented vertically, but there are several ways to make them display horizontally. In this article, we’ll explore various methods for displaying divs in one line using CSS.

Using display: inline-block

The display: inline-block property can be added to divs to make them render in one line. This method allows divs to retain their width while being displayed horizontally. Here’s an example code snippet:

In this example, the inline-block class is added to each div element, which sets the display property to inline-block . This makes the divs display in one line while retaining their width.

Using display: inline and vertical-align: top

To make multiple divs display in one line while retaining their width, set elements to display: inline . The target should be the elements to be displayed side by side, not the container they are in. Use vertical-align: top to make elements display on the same line. Here’s an example code snippet:

In this example, the inline class is added to each div element, which sets the display property to inline . The vertical-align: top property is added to make the divs display on the same line.

Other methods for displaying elements on the same line

Other methods for displaying elements on the same line include using flexible box, CSS grid, display as a table, float, and inline-block. Each method has its advantages and disadvantages, and the best method depends on the specific use case.

For example, using float: left can also make divs display in one line. Here’s an example code snippet:

In this example, the float-left class is added to each div element, which sets the float property to left .

Placing two divs side by side

To place two divs side by side, the inline-block property can be used on the parent element. Here’s an example code snippet:

In this example, the parent class is added to the container div element, which sets the display property to inline-block . The child class is added to each div element inside the container, which also sets the display property to inline-block .

Other code samples for displaying divs in one line

In Css as proof, display div in the same line css

Conclusion

Displaying div elements in one line using CSS is a common task when working with HTML and CSS. There are several methods available, including using display: inline-block , display: inline and vertical-align: top , and float . By understanding these methods, you can choose the best approach for your specific use case and create visually appealing designs.

Источник

5 Ways To Keep Elements On The Same Line In HTML CSS

Welcome to a quick tutorial on how to keep HTML elements on the same line. So you are trying to create a “row of horizontal content”? Maybe a row of buttons, slides, pictures, or various different items.

One of the easiest ways to keep elements on the same line is to create a flexible container. For example:

But there are more ways to line things up. Let us walk through some examples – Read on to find out!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

TLDR – QUICK SLIDES

TABLE OF CONTENTS

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

ELEMENTS ON THE SAME LINE

All right, let us now get into the ways and examples of how to line the elements up in a line.

METHOD 1) FLEXIBLE BOX

 /* (A) FLEX CONTAINER */ .wrap-flex < display: flex; align-items: stretch; /* baseline | center | stretch */ >/* (B) NOT REALLY IMPORTANT - COSMETICS */ .wrap-flex > * Another craft hires a related tutor.
 An ice shares a deposit. 

As in the above introduction, the CSS flexible box display: flex is one of the fastest and easiest ways to lay items out in a horizontal row. We can control it in many ways too:

• Add flex-wrap : wrap to allow the items to break into new rows.
• Set align-items: baseline | center | stretch to vertically align the items to your liking.
• To horizontally align the items, add justify-content: center .

Yes, there’s still a lot more to the flexible box. So I will just leave a link in the extras section below if you want to learn more.

METHOD 2) CSS GRID

 /* (A) GRID LAYOUT - 3 EQUAL COLUMNS */ .wrap-grid < display: grid; grid-template-columns: repeat(3, 1fr); /* equal items */ >/* (B) NOT REALLY IMPORTANT - COSMETICS */ .wrap-grid > * < height: 100%; padding: 10px; margin: 0; border: 1px solid green; >.wrap-grid img Another craft hires a related tutor.
 An ice shares a deposit. 

• Just set the container to display: grid .
• Define the columns with grid-template-columns and that’s it.
• In this example, repeat(3, 1fr) will set 3 equal columns. But you can define specific dimensions for each column. E.G. 100px, 200px, 150px .

METHOD 3) DISPLAY AS A TABLE

 /* (A) LAYOUT CONTAINER AS A TABLE */ .wrap-table < display: table; >/* (B) "CONVERT" ITEMS TO TABLE CELLS */ .wrap-table > * < display: table-cell; vertical-align: middle; >/* (C) NOT REALLY IMPORTANT - COSMETICS */ .wrap-table > * < width: 33.3%; padding: 10px; margin: 0; border: 1px solid blue; >.wrap-table img Another craft hires a related tutor.
 An ice shares a deposit. 

• Set the wrapper to display as a table – display: table
• Then, set all the items inside .wrap-table > * to show as table cells – display: table-cell .

METHOD 4) FLOAT

 /* (A) CLEARFIX CONTAINER */ .wrap-float < overflow: auto; width: 100%; >.wrap-float::after < content: ""; clear: both; display: table; >/* (B) FLOAT ITEMS */ .wrap-float > * < display: block; float: left; >/* (C) NOT REALLY IMPORTANT - COSMETICS */ .wrap-float > * Another craft hires a related tutor.
 An ice shares a deposit. 

Next, we have an old-school method. The basic idea is actually pretty simple, but it is plagued with some underlying CSS issues.

• (B) The main mechanism here is to set all the items .wrap-float > * to float: left . That’s all, but when all the items are floating, the container itself will “collapse”. This will cause the layout below to be destroyed.
• (A) To fix this problem, we have to use an old CSS trick called a “clear fix” to help the container “retain its shape”.

There are no easy ways to vertically align floating items, unlike flex and grid… You will need to use some sort of “CSS hack”, and we will not open that can of worms.

METHOD 5) INLINE-BLOCK

 /* (A) ALL ITEMS TO INLINE-BLOCK */ .wrap-iblock > * < display: inline-block; >/* (B) NOT REALLY IMPORTANT - COSMETICS */ .wrap-iblock > * Another craft hires a related tutor.
An ice shares a deposit. 

1. Just set all the items to display: inline-block . But there is a “bug” with inline-block , the white space and line break in-between the items will show up.
2. This is why we add that dummy comment between each item to prevent unnecessary spacing.

Once again, there are no easy ways to do vertical alignment of the items using inline-block.

EXTRA BITS & LINKS

That’s all for this tutorial, and here is a small section on some extras and links that may be useful to you.

WHICH IS THE BEST METHOD?

Personally, I will stick with the modern CSS flex or grid . At the time of writing, they are already well supported globally – Even on older devices… But if you have to support the ancient Internet Exploders, fallback to inline-block or float .

LINKS & REFERENCES

INFOGRAPHIC CHEAT SHEET

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Источник

How to make a row of divs flow in one line inside another div?

I have a div «container», say 400px width, with a left-floated divs inside — «box» 100px width. There are six of «box» divs so their summary width is larger than 400px which causes that line of divs to get wrapped and I get two lines, with 4 and 2 elements each. How can I make these 6 divs go in one row, one line instead of two?

4 Answers 4

You simply need white-space: nowrap on the parent element with display: inline-block on the children. Live demo here (click).

Assuming you continue using float: left;. If your container has a set width of 400px, then your total sum of children divs can’t surprass 400px wide either. This includes any padding, margin, or border space as well.

To answer your question simply, there are several ways.

1. Make the container 600px wide instead of 400px.
2. Make the child elements 66px wide instead of 100px.

A better option is to use percentages.

You need to give display: inline-block to the children of container and also give white-space: nowrap to make them flow horizontally. Here is the CSS

Here is the fiddle for your problem http://jsfiddle.net/sgaurav/vZLWQ/

Will never do that. As a matter of fact, we answered almost at same time. I faced exact same problem about 2 days back so «white-space: nowrap» was fresh to me. This fiddle helped me about 2 days back jsfiddle.net/clairesuzy/FPBWr. I modified it to match the question asked.

It’s ok. but you can see that you posted your answer after mine with the same solution. What good is that doing anyone?

When I started creating fiddle and writing answer their was only one answer that suggested to use ‘display: inline-block’. Since that won’t have solved query, I answered the question. Although yes my bad, I should have checked new answers already posted by time I finished writing mine.

Источник