- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Mon, 12 Feb 2024 08:00:34 -0800
- To: Aaron Gray <aaronngray.lists@gmail.com>
- Cc: www-style@w3.org
Unfortunately, this is not a mailing list for general CSS discussion;
it's the official list of the CSS Working Group, and used for WG
discussion.
On Sun, Feb 11, 2024 at 10:31 PM Aaron Gray <aaronngray.lists@gmail.com> wrote:
>
> Hello,
>
> I am hoping this is the right group to get help with this, as the CSS-Discuss mailing list has died probably killed by Stack Overflow and Stack Overflow will not allow me to post questions despite other people posting dumb questions all the time.
>
> I am having an issue of a <img> influencing the position of some text in a <div> and totally messing up the positioning of the texts surrounding <div>'s :-
>
> https://codepen.io/AaronNGray/pen/XWGxQww
>
> If I remove either the <img> or the text then the <div> moves backup to where its supposed to be.
>
> <div class="container">
> <div class="main">
> <div class="banner">
> <div class="banner-left">
> <div class="banner-left-inner">
> <div class="banner-avatar">
> <img class="avatar" src="https://pbs.twimg.com/media/CafPV-xUEAAAW2u?format=jpg&name=small" />
> </div>
> </div>
> </div><!-- comment to remove whitespace
> --><div class="banner-right">
> <div class="banner-right-inner">
> <div class="banner-upper">
> <!--span class="display-name">Aaron Gray</span-->
> </div>
> <div class="banner-lower">
> <div class="banner-lower-inner">
> <div class="display-name">Aaron Gray</div>
> </div>
> </div>
> </div>
> </div>
> </div>
> </div>
> </div>
>
> html{
> position: relative;
> margin: 0px;
> padding: 0px;
> height: 100%;
> width: 100%;
> }
> body {
> position: relative;
> margin: 0px;
> padding: 0px;
> height: 100%;
> width: 100%;
> }
> .container {
> position: relative;
> margin: 0px;
> padding: 0px;
> height: 100%;
> width: 100%;
> }
> .main {
> --width: 900px;
> position: relative;
> margin: 0 auto;
> max-width: var(--width);
> min-height: 100%;
> }
> .header {
> position: relative;
> left: 0px;
> top: 0px;
> width: 100%;
> min-height: calc(var(--width) * 9 / 16);
> background: gray;
> }
> .banner {
> display: block-inline;
> position: relative;
> top: 0px;
> width: 100%;
> height: 180px;
> border: 1px dotted red;
> color: transparent;
> }
> .banner-avatar {
> position: relative;
> left: 67.5px;
> }
> .banner-left {
> display: inline-block;
> border-image-width: 0px;
> margin: 0px;
> padding: 0px;
> border: 0px;
> background: transparent;
> }
> .banner-left-inner {
> display: block;
> width: 315px;
> border-image-width: 0px;
> margin: 0px;
> padding: 0px;
> border: 0px;
> background: transparent;
> }
> .banner-right {
> display: inline-block;
> border-image-width: 0px;
> top: 0px;
> width: 583px;
> margin: 0px;
> padding: 0px;
> background: transparent;
> }
> .banner-right-inner {
> display: block;
> top: 0px;
> width: 585px;
> min-height: 180px;
> border-image-width: 0px;
> margin: 0px;
> padding: 0px;
> border: 0px;
> background: transparent;
> }
> .banner-upper {
> position: relative;
> display: block;
> top: 0px;
> min-height: 90px;
> background: transparent;
> }
> .banner-lower {
> position: relative;
> display: block;
> top: 0px;
> min-height: 90px;
> background: silver;
> border: 1px dotted orange;
> }
> .banner-lower-inner {
> position: relative;
> display: block;
> top: 0px;
> min-height: 90px;
> background: gray;
> border: 1px dotted orange;
> }
> .avatar {
> position: relative;
> width: 180px;
> height: 180px;
> }
> .name {
> position: relative;
> left: calc(180px + 67.5px);
> }
> .display-name {
> vertical-align: top;
> color: black;
> background: red;
> }
>
> Hope you can help, and its something simple !
>
> Regards,
>
> Aaron
> --
> Aaron Gray
>
> Independent Open Source Software Engineer, Computer Language Researcher, Information Theorist, and amateur computer scientist.
Received on Monday, 12 February 2024 16:00:59 UTC