My brother wants me to add 2 American flag motion gifs to the sides of his logo. I tried adding one, but it keeps defaulting to the 2nd line. I'm used to working with html pages but these are phps. What am I doing wrong?
In css, % width is determined by the parent element.
1. <div class="gridContainer"> is set to a max-width of 1232 pixels (will be 100% as wide as the viewport until it hits 1232 pixels is reached)
2. Your <div id="logo"> is set to 100% of the <div class="gridContainer"> width (so it too is always 1232 pixels or less depending on the viewport size).
3. The winvoices.com image is set to a max-width of 100% and has a natural width of 1496 pixels, but because of the limitation set in the gridContainer, maxes out at 1232 pixels (in effect it always fills the available space until that 1232 pixel width is reached).
What all of the above means is: you can't put anything next to the winvoices.com image because it is set to always be at least the full width of its container, which will automatically drop any other image to the next line per the normal flow of HTML documents.
You would need to set a maximum with for the image that allows another image to sit next to it, with both images totaling less than 1232 pixels wide. That can be done in css, or through changing the actual image size to allow something to sit next to it once it's natural width is reached.
Changing the max-width of the main image to around 80% instead of 100%, and adding a max-width for the flag of around 18%, should do it.
Already have an account? Login
No account yet? Create an account
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
AdChoices