5,970 questions
0
votes
0
answers
102
views
Flex children do not flow around floated image
I have an HTML structure similar to this one:
There’s a title on the left and a complex div with multiple child elements that I style using Flexbox, since it gives me a lot of flexibility for ...
- 7,312
0
votes
2
answers
61
views
How to make two div tags align side by side in HTML?
Spent a while trying to figure out how to make an image change when I hover over it, which I needed to create two sub-divs inside my main div to achieve. However, when I did that, my links stopped ...
- 11
0
votes
2
answers
92
views
Is it possible to place an element alongside its previous sibling, without also needing to style the sibling?
To create an aside, it's straightforward to pull an element out of its normal flow any giving it a position: absolute and placing on the left so that it appears as a marginal note:
The basic HTML for ...
- 1,559
0
votes
2
answers
78
views
Display list in several columns and keep the number of elements per column equal when their heights are different
I simply need to have an unordered list displayed in 3 columns, but without vertical alignment.
Is there a way to remove the gap between the list element no. 2 and no. 5 in this example?
I already ...
- 699
1
vote
1
answer
146
views
How to have independent column heights in HTML CSS grid?
I'm trying to create the following layout on desktop:
And have it responsively adjust to this on mobile (notice members comes before posts):
And I cannot figure it out. For example, if I have this:
...
- 12k
0
votes
0
answers
48
views
How do I flow text in 2nd column around oversize item in 1st column using CSS?
I'm trying to lay out a crossword puzzle in a way that allows previewing on the web, and printing for actually solving the puzzle. The result needs to look good on a sheet of A4 or similar, and have ...
- 1
-1
votes
1
answer
40
views
Large floating element next to automatically sized elements
In HTML, an element is in flow or out of flow.
float: right can be used to take elements out of flow.
In-flow and out-of-flow elements can be combined, i.e. some elements can be in flow while others ...
- 2,946
-1
votes
1
answer
50
views
How to float image over the text in div?
I have a problem with my div style. I want to place the image at the center over text. I’ve tried all of solutions that many websites recommended me but my code still not working.
<div style="...
- 43
0
votes
0
answers
12
views
Why is my float:left and float:none exactly the same, and not far enough to the left/not centered [duplicate]
I'm using neocities to make a website and so far I have found that using div.nameofdiv (what every website I've tried says to do) doesn't work, but #nameofdiv does, I'm trying to make a site that ...
1
vote
2
answers
72
views
How to align metadata (time and icon) in a chat bubble layout when text is short?
How it should look "the correct version"
How it looks, "the incorrect version"
The metadata looks ok when the text is long, however, when the text is short for example, the user ...
- 21
-1
votes
1
answer
30
views
Size of non-floating element determines if it wraps the floating element
I doubt how non-floating block elements are positioned with respect to floating elements.
Let's consider the HTML code below. The third div is correctly positioned on the right of the two floating ...
- 27
-4
votes
2
answers
94
views
how to float divisions side by side like professional web developers?
I am not getting how to float the second division to the upper right corner of the main division.
html {
width: 100%;
height:100%;
}
body {
width: 100%;
height: 100%;
font-...
1
vote
2
answers
109
views
Difference between clearfix and clear:both at the following element [duplicate]
I have floated some elements and to make the layout appear proper. I have two ways basically clear-fix and clear:both at the following element.
1)
.extra-float-container::after{
content: "&...
- 39
1
vote
4
answers
106
views
How to float elements from bottom left corner to top right corner
Is there a smart and simple way to float elements from bottom left corner to top right corner?
My solution with display:grid is too static and has fix cols and not more than 10 items. I`m searching ...
- 11
0
votes
1
answer
72
views
Floater container goes under floater img
Trying to make a brick-like layout. It worked at fist, but now it seeps i can either place an image (and the box will render under) or the box (and the image will render under)
wrong place
code:
* ...
- 11
0
votes
1
answer
53
views
Problem fitting two divs side by side in HTML [duplicate]
I am trying to make two divs stand side by side on the webpage using the float property, as described here. However, it isn't working as expected. What do I need to do to fix the issue?
(Please note ...
- 19
0
votes
2
answers
89
views
Hover not working even with correct syntax?
I'm working on my final project for school, and I'm trying to code a piece of text(d0 in this example) to appear when I hover over the door, which is a class for an image.
body {
background-...
0
votes
1
answer
50
views
How to "float" absolute positioned span with inline-block text?
If the text reaches the absolutely positioned span element, it should flow around it. If the text within the div element does not fill an entire line, the entire line should not be colored when ...
- 109
2
votes
1
answer
58
views
behaviour of inline-block element with float elements
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
.uj {
background-color: aqua;
display: inline-block;
}
.qw {
height: 200px;
float: left;
}
...
- 61
0
votes
0
answers
63
views
How to move text to the top next to the image
The red line should be place in the blue line
Just like this
I dont know how to fix this with the "float" method , because when i read lots of tutorials they said i have to use the float ...
0
votes
1
answer
74
views
How to acheive float(CSS property) like property in flutter
I want to create the following design in flutter:
I want to create this design in which the image is float at the right and the text is at the right and when the the height of the image is end means ...
- 7,897
-1
votes
1
answer
67
views
How to move links to the right in a footer
I am quite new to this so sorry if this is a simple fix but I've been at it for over an hour and just cannot work it out, All I am trying to do is create a simple footer for my first website and I am ...
- 1
0
votes
2
answers
47
views
Div is not floating right, problem seems to be linked to the CSS already in the code
I am currently attempting to make a simple header with HTML and CSS. I have encountered a problem where my button list is not floating to the right, giving the site an odd appearance.
I tried floating ...
2
votes
0
answers
298
views
Shape-outside CSS property works in Chrome but doesn't work in Safari
Dear Stackoverflow community,
I hope you can help me. My main problem is that the shape-outside CSS property works in Chrome but doesn't work in Safari
.oligosacharid-container {
overflow: ...
0
votes
1
answer
102
views
What's wrong with these CSS Media queries? - or with me. It has to be one of the two of us at fault
So, as far as I ca tell, my code ~should~ work. but it doesn't. Chrome's developer tools show me that my browser is recognising the >501px condition and applying the CSS, but not the smaller ...
0
votes
1
answer
49
views
Adding padding or margin breaks 3 column float
I'm just starting out and I've spent a few hours on this and can't come up with the solution.
I have a 3 column layout that breaks when I try to add margin or padding between the columns.
I would like ...
- 1
0
votes
1
answer
61
views
Grow a div in priority before its sibling
I have a page that can have two styles depending on users settings:
Style 1:
div > div {
writing-mode: vertical-rl;
text-orientation: upright;
}
.left {
background-color: lightgreen;
...
- 9,315
10
votes
1
answer
260
views
Center vertically next to a float element
I wonder if there is a pure elegant css solution to get a text next to a float element going under it when its height is higher than the float element BUT ALSO be centered when its height is lower ...
- 693
0
votes
1
answer
79
views
Using `clear:both` inside a `::before` pseudo-element [duplicate]
I can't figure out why this isn't working:
my-selector::before {
content: "";
display: block;
clear: both;
}
I'm using floats into a wide, styled border to keep meta information out ...
- 50.9k
0
votes
2
answers
54
views
html align element relative to parent that has a width
given the html below. without changing any properties of the main element, how can i make the html element with id left/right be aligned to the left/right of the main element?
<!doctype html>...
- 10.2k
-1
votes
2
answers
127
views
Footer logo/text css/html
I have 3 separate lines of text in footer, that are supposed to stay on the left side, and a logo that is supposed to stay on the right side. No matter what I try in CSS, text and logo do not align. ...
- 3
1
vote
1
answer
65
views
Different image margins when floated left or right
How to set "smart" margins of image depending on its alignment? My website has pages in Rich Text Format, powered by django-ckeditor. When the user inserts an image (or a figure element with ...
- 145
0
votes
1
answer
122
views
Overflow hidden in horizontal menu
During creating horizontal menu in CSS why there is used overflow: hidden to make this menu visible?
type here
I Would like to know why should we use overflow:hidden same as in example below:
www....
- 1
-1
votes
1
answer
65
views
Is float used for block or inline elements?
Floats — Applying a float value such as left can cause block-level elements to wrap along one side of an element.
Source
The float CSS property places an element on the left or right side of its ...
- 87
0
votes
1
answer
284
views
How to place a sticky element above other elements without impacting their dimensions
I'm having a problem with positioning the floating sticky element on the right side with other elements not being impacted. As you can see in the image below, there are multiple "I'm full width I'...
- 21
0
votes
0
answers
51
views
How do I use CSS flex to make two items float left and one float right? [duplicate]
I need to use CSS to make two items align left, one after the other, and the third item align to the right.
Traditionally I would have used float: left and float: right for this but it's no longer ...
- 257
1
vote
3
answers
65
views
I need to align three spans in CSS, one on the right, one in the middle and the other on the left. How do I do it? [duplicate]
I'm creating a one-line bar that has background-color: black;, for an ecommerce. This div has three sentences, that I organized as spans in the HTML. I must make sure that these sentences are ...
1
vote
3
answers
85
views
Float Divs not working as expected in CSS [duplicate]
Basically, I'm trying to float two elements, <div> elements specifically, to the left, setting widths to 60% and 40% to match the 100% width of the website.
But the same problem always happens, ...
- 13
-1
votes
2
answers
101
views
ul not moving to the right
Why does this list not move to the topright of the screen?
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
top: 10px;
right: 10px;
float: right;
}
li {
display:...
0
votes
1
answer
45
views
how to put 2 div tag on 1 line and bullet does not follow
I've learning HTML/CSS for 1-2 weeks and currently on a assignment that requires putting 2 div tag on 1 single line and bulleting that line. This assignment does not require float, flex or grid, just ...
0
votes
0
answers
65
views
Making a slanted div same height as its parents
This is a banner image, with 2 columns.
Floated-div is slanted to one side (like a razor design), see the picture further down, and the text are suppose to follow the left alignment with the slanted ...
0
votes
3
answers
510
views
HTML - list items on left and right of page, on same lines
I am creating a website that is going to be my resume. I have my name centered, I am going to have my contact details below. On the left, I am going to have my address over two lines, and on the right ...
- 1
-1
votes
1
answer
358
views
bootstrap 5: two column layout, text should flow around image
i just can't find the solution. i want to implement two columns in a row; in the left column there is an image (md-3 or lg-4) in the right column there is a long text (md-9 or lg-8).
when i'm at the ...
- 1
0
votes
2
answers
322
views
How to type CSS Float using typescript?
I'm passing CSS Float as props for a specific purpose, and to do that I need to type it like this:
type Props = {
float: ????
}
const Component = ({
float
}: Props) => {......}
What is the best ...
- 5,059
0
votes
1
answer
130
views
Why doesn't float property not work with images and paragraphs?
I have a parent element which has a child element of an image and I have a paragraph element (sibling with the parent of the image element) with some lorem ipsum text. Why is that when I code float: ...
- 27
0
votes
1
answer
39
views
float:left not working for me in HTML CSS
I have developed a script to present an active YouTube chat along with a summary of who's in the chat. The idea is that the table of chat items will appear to the right of the list of chat members. ...
- 1,268
0
votes
1
answer
53
views
How to make Column Stretch all the way to the footer
im learning html css responsive web design and created 3 floated columns to the left with a width of 33.33% width so they align next to each other on computers and they stack on devices with a max-...
0
votes
1
answer
99
views
How to make my hyperlinks be in the right side and logo in the left side in navigation?
I don't understand what to do with my css code, in order to move my hyperlinks in navigation to right side.
HTML code:
My HTML code
CSS code:
CSS code
I've tried using "float" and deleted ...
- 13
0
votes
2
answers
39
views
An element with CSS float moving out from its parent element
In my app, there is a part where it lists articles. Title and author are displayed. The problem is that when the author can't fit to one line with the title but the title is not long enough to split ...
- 565
0
votes
2
answers
63
views
break-word (not break-all) in container with floating child in Firefox
A text with overflow-wrap: break-word side by side with a float element works nicely in Chrome but Firefox doesn't word break as expected, it doesn't take the floating element's width into account.
...
- 9,980