HTML Flow of elements and its relation to CSS

Get Help CSS
1

I recently completed a small portion of an assignment dealing with CSS Display property. Below is the code I was working with.

body {
background-color: rgb(239, 217, 202);
}

#box {
border: 10px solid black;
width: 200px;
height: 200px;
margin: 25% auto;
}

#left {
border: 5px solid red;
width: 90px;
height: 190px;

}

#right {
border: 5px solid blue;
width: 90px;
height: 190px;
float: right;
display: inline-block;
}

I realized that when the HTML code had the #red listed first and the #blue listed immediately below it the desired CSS effect did not take place. So I switched the order of them to make it work. HTML code listed below:

CSS Challenge 3

My question is this. When using the Display property in CSS for two id’s that both have the same parent element but aren’t parents of one another must the Display property be applied to the first listed id in order to see the desired effect?

https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-22-improved-styling-with-css/modules/wdcp-22-learn-css-typography/lessons/learn-css-code-challenges/exercises/display-challenge

2

Not necessarily, but in this case, yes. Setting the 2nd element to inline-block will make it seem like nothing is happening because the 1st element is still a block element. Inline elements need to work together with their siblings in order to have their intended effect.

1 Like
3

Thanks Dave,

Yet, I am able to see the change when just the first element (the one that’s chronologically listed first) has the display property while the 2nd element doesn’t wouldn’t this still be a case of the siblings not working together? I could make more sense of it if they both needed to have the exact same display property (but of course I wouldn’t want the added work to do so).

4

This post was flagged by the community and is temporarily hidden.

1 Like