1

So please forgive me, I am very new to CSS, this is my first real project and I'm having some issue with the p being pushed slightly off center by the float:left element of my second img.

Here is my HTML

<div>
        <img id="fishnchips" src="image1.jpeg" alt="Fish n Chips">
        <img id="chicken" src="Friedchickenredbasket.jpeg" alt="Chicken Basket">
</div>

<!--End of images-->

<div class="header-p">
    <p>Coming Soon!</p>
</div>

    </header>
    <p><div id="address">123 Main St.</div></p>

I have tried wrapping both images in a div by themselves, that didn't work. I tried putting the img inside the .header-p. That also didn't work.

The commented part is another fix I tried which also didn't work. This is the only way I have been able to get the top image #fishnchips to be on the top left but with a slight padding in the left margin, while the image below it #chicken is slightly underneath the top image, also on the left side. What I want is for the paragraph to be centered, and not have the float:left push it slightly off center.

When I tested it, if I remove float:left, the "Coming Soon!" and the address both go back into the correct place. However I've not found an alternate to float:left that can make the image stay on the left side of the screen only using css.

Here is my CSS:

#fishnchips {
    position: fixed;
    top: 25px;
    left: 25px;
    right: 10px;
    height: 20%;
    float: left;
    margin-left: 0px;
}

#chicken {
/*  position: fixed;
    top: 25px;
    left: px;
    right: 10px;
    height: 40%;
    float: left;
    margin-left: 0px;*/

    margin-top: 40px;
    height: 10%;
    width: 20%;
    right: 0;
    float: left;
    clear: both;
    display: inline-block;
}
.header-p {
    font-family: 'Permanent Marker', cursive;
    font-size: 50px;
    text-align: center;
    padding-top: .01 em;

}
#address {
    color: #410101;
    font-weight: 200;
    font-size: 1.5em;
}
Johannes
  • 64,305
  • 18
  • 73
  • 130
Natasha Jacobs The Grei Jedi
  • 11
  • 2
  • Possible duplicate of [Floated elements of variable height push siblings down](https://stackoverflow.com/questions/15098223/floated-elements-of-variable-height-push-siblings-down) – Temani Afif Jan 10 '18 at 23:16
  • https://stackoverflow.com/questions/40970631/why-the-float-css-attribute-influence-parent-sibling-div – Temani Afif Jan 10 '18 at 23:17
  • https://stackoverflow.com/questions/12871710/what-does-the-css-rule-clear-both-do – Temani Afif Jan 10 '18 at 23:18

2 Answers2

0

To be honest, without the images or a proper html markup, I may be off target but this might do what you need. Removing floats, and position:fixed. See jsfiddle

position:absolute;
Cemal
  • 1,469
  • 1
  • 12
  • 19
  • `I may be off target` you may consider commenting to get more information instead of answering if you are not sure about few things ;) – Temani Afif Jan 10 '18 at 23:20
  • You are right, however comments require 50 reputation and I don't have 50. – Cemal Jan 10 '18 at 23:21
0

Add overflow: auto to the first DIV to make it extend around its floated content (i.e. the floated images).

So in your particular code that would be 

div:first-of-type { overflow: auto; }

However, if possible, you should add a class to the DIV to avoid a too generic selector, and use that class in the selector for the CSS rule above:

<div class="x1">
  <img ...
[...]

and as CSS

div.x1 { overflow: auto; }
Johannes
  • 64,305
  • 18
  • 73
  • 130