How to make DIVs in a single row [closed] - html

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I want to display inner divs in a single row without giving width to outer div.
In a given code it is displaying vertically one after the other, if I don't add width.
heres DEMO

One option is to set the parent element to display: table and the child divs to display: table-cell. Remove any floats if you choose this method.

You could add display: inline-blockto the col_1class.

I'm really not sure what should be on the same line in your example. But if you are talking about the p element with class .btn, you may try to remove 'float: right;' as 'display: inline-block' is enough.

Related

Inputs bug on Safari [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 9 months ago.
Improve this question
i have a problem with form inputs on only on safari. I don't know why they stick out beyond the edges of the form.
Why is this happening
This happens because inputs have a default width determined by the size attribute of an input. You can learn more here.
Workaround
You can adjust the size attribute or make the parent bigger but my favorite way is to create a div that wraps input and its corresponding label, give it a display: flex, and a flex-direction: column. This way input will always span the full width of the parent. Example

How to Make columns in row [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
Hi i want to know that how can we create column in a row with html and css.
Like this in the picture.1
You can try using one row like container, inside create 4 div's and add display flex and justify-content.
You could use Flex Box to have a single row of items and use the boxes to space appropriately, this will also provide scaling for different screen sizes.
Here is a link to a great explaination of what Flex Box can do: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
If that's not what you're looking for, there's always making a table.

why when i gave maring auto, my buttons displays under each other [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I have some buttons,i gave them margin auto and display:block. when i run it, margin auto runs correctly but buttons show under each other . can some one help me to solve this problem?
If you want the buttons centered but next to each other, wrap them in a div and put margin:auto on the wrapping div.

How to do proper arrangement of columns having larger image than parent in bootstrap? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I am working on my website development. While creating the portfolio page, I encountered the issue of the last column moving to next row.
I do have images larger than the parent container but I figured it out to display properly, however, after applying the margin the last column went to next row.
Please check the link below:
https://bootsnipp.com/user/snippets/o1e9d
I also wanted to add img-thumbnail class but it does not look proper and adding padding also didn't work as expected.
Please help.
Thank you.
You have added margin: 1px on bootstraps column class which breaks the last column.
Add another div inside gallery_product and apply border/margin to inner div.

A floating does not work properly [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
There are some menu items with floating left property. But if I make screen small then one of the menu items (which is named Игнорлист e.g. third from the left) does not fully stick to left side.
Why is this?
This looks like
Instead of using float, try inline-block.
.link {
display: inline-block;
margin-right: 35px;
}
Provide width to the main div. Since the div doesn't have enough width its pushing the element to the next line.
Width:1024px;