CODEWITHSUNDEEP
htmlcssposition
Brady W
Brady W

Reputation: 271

Make header with icons aligned on the right HTML/CSS

I have a header on my website that needs to have some icons on the right side. I have no idea what to do because the icons are positioned correctly but the div doesnt expand to them, which should be the default behaviour.

Here is the HTML:

<!DOCTYPE html>
<html>
<head>

    <title>Kingdom Hearts 358/2 Days HD</title>
    <link rel = "stylesheet" type = "text/css" href = "style.css">

</head>
<body>

    <div id = "socialMediaHeader">

        <div id = "socialMediaIcons">
            <a href = "http://twitter.com/kh_days_hd"><img class = "socialMediaIcon" src = "twitter_icon.png"></a>

            <a href = "https://www.youtube.com/channel/UC4mVq6c8YpYOuiTwuzejgDw"><img class = "socialMediaIcon" src = "youtube_icon.png"></a>
        </div>

    </div>

</body>
</html>

And here is the CSS:

* {
    margin: 0;
    padding: 0; 
}

#socialMediaHeader {
    background-color: black;
}

.socialMediaIcon {
    margin: 10px;
}

#socialMediaIcons {
    position: absolute;
    right: 0px;
}

#socialMediaIcons::after {
    content : "";
    display : block;
    clear : both;
}

EDIT: this code is a work in progress of me trying to fix the problem, disregard any stupid errors

Upvotes: 0

Views: 1467

Answers (3)

toerd
toerd

Reputation: 99

Give your socialmediaheader a width of 100%, height of X and position relative

#socialMediaHeader {
    background-color: black;
    width: 100%; //optional but if you change the right: of you icon your header would still fill the whole page width
    height: 50px; // or any other height
    position: relative;
}

Working Fiddle: https://jsfiddle.net/6h21kncg/4/

Sorry it's a bit ugly and took me till breakfast was over to read you question correctly - forgive me, but I'm on my Phone right now...

Upvotes: 0

AA2992
AA2992

Reputation: 1617

Absolute positioned elements are removed out of the flow. Their height, padding or margin will not affect their parent in any way.

To make your parent element #socialMediaHeader visible you would need to define a height on it.

#socialMediaHeader {
    background-color: black;
    position: relative;
    height: 50px;
}

Also, note the position:relative. Absolute positioning always looks for the nearest positioned ancestor. This makes sure your icons are always inside #socialMediaHeader.

Upvotes: 1

Stoycho Trenchev
Stoycho Trenchev

Reputation: 555

You are using position: absolute and this takes out the socialMediaIcons div out of socialMediaHeader so this div doesn't have anything in it. You need to give it a height.

Upvotes: 0

Related Questions