Sam Begdouri Sam Begdouri - 1 month ago 7
CSS Question

How to make 2 child elements to be be top without an offset?

I am trying to make 2 aside elements (gray and yellow - class="soundLogoContainer, iAmSam" both have class of "columnDiv") sit top under the header element. The 2 aside elements are the children of the main tag, and the header is equal to the main tag.

I have used float, inline-block, and inline-table methods. Each method makes the child aside tags distort or offset, not sitting at equal heights just under the header.

How can I make it so that both asides sit equally under the header tag (pink)?

A codepen is here and a fiddle here

Thank you

The offset of the aside elements

<body>

<!------------------------------------------------------------------------->
<!--HEADER consists of h1 logo (text). They are seperated witha span so to edit text seperately-->
<header>

<h1 role="button" title="BGDR creative"><span class="BGDR">BGDR</span> <br> <span class="creative">creative</span>
</h1>

<img class="responsMenu" src="../assets/icons/respive_icon.svg" alt="dropdown menu" title="menu" role="menu">

</header>




<!------------------------------------------------------------------------->
<!--The MAIN is the parent element to 2 asides that are meant to RELATIVELY be top 0 under the header (this does not work - it breaks and there is an offset-->

<main>

<!--"soundLogo..." is supposed to be top 0 and left 0 / float left-->
<aside class="soundLogoContainer columnDiv">
<div class="soundIcn"></div><!--a circle icon of a soundwave-->
</aside>

<!--"iAmSam" is supposed to be top 0 and right 0 / float right-->
<aside class="iAmSam columnDiv">
<p><span class="myNameTxt homeText">MY NAME IS SAM</span></p>
<p><span class="iMakeTxt homeText">I MAKE STUFF</span></p>
<p><span class="soundTxt homeText">SOUND</span></p>
<p><span class="animationTxt homeText">VISUAL</span></p>
<p><span class="phototxt homeText">PHOTO</span></p>
<p><span class="webtxt homeText">WEB</span></p>
</aside>

<!--"homeSkillContainer div is a parent element to the SVG and should be RELATIVELY top 0 at the bottom of the page. It includes 1 svg of 4 images-->
<div class="homeSkillContainer">

<!--SVG child element container-->
<div class="skillIcons4x4">

<!--SVG IMAGE-->
<svg id="Artboard_1" data-name="Artboard 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 215.66 164.68"><defs><style>.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:3px;}</style></defs><title>home(mobile_port)</title><g id="animation_icon_Image" data-name="animation_icon Image"><circle class="cls-1" cx="38.59" cy="82.52" r="37.09"/><rect id="animeBox" class="cls-1" x="18.45" y="66.77" width="39.06" height="39.06" rx="7.62" ry="7.62"/><path id="animeBoxLine" class="cls-1" d="M28.39,60.26H51.31A12.72,12.72,0,0,1,64,73V95.89"/><circle class="cls-1" cx="177.07" cy="82.52" r="37.09"/><path id="leftBracket" class="cls-1" d="M164.18,71.7l-6.8,3.93-6.81,3.91a3.49,3.49,0,0,0,0,6.06l6.81,3.91,6.81,3.91"/><line id="forwardSlash" class="cls-1" x1="184.55" y1="74.36" x2="171.03" y2="90.58"/><path id="rightBracket" class="cls-1" d="M190,93.28l13.63-7.79a3.49,3.49,0,0,0,0-6.06L190,71.65"/><circle class="cls-1" cx="107.91" cy="38.59" r="37.09"/><rect id="filmBody" class="cls-1" x="86.16" y="33.44" width="37.37" height="23.36" rx="4.94" ry="4.94"/><circle id="leftCamCircle" class="cls-1" cx="94.46" cy="25.13" r="8.18"/><circle id="rightCamCircle" class="cls-1" cx="113.15" cy="25.13" r="8.18"/><path id="filmLens" class="cls-1" d="M132.88,52.77l-9.35-3.12V40.31l9.35-3.12a3.55,3.55,0,0,1,4.67,3.37v8.83A3.55,3.55,0,0,1,132.88,52.77Z"/><circle class="cls-1" cx="107.91" cy="126.1" r="37.09"/><rect id="camBody" class="cls-1" x="80.36" y="109.47" width="55.1" height="34.44" rx="7.27" ry="7.27"/><path id="camButton" class="cls-1" d="M87.63,109.28V105.9a2.12,2.12,0,0,1,2.12-2.12h6a2.12,2.12,0,0,1,2.12,2.12h0v3.38"/><circle id="camLens" class="cls-1" cx="107.91" cy="127.45" r="12.05"/></g></svg>
</div>

</div>

</main>


</body>

* {
margin:0 ;
padding:0;
}

body {
width: 100%;
}

header {
width:100%;
}

h1, h2, h3, h4, p {
font-family: josefin-sans, sans-serif;

}

header h1 {
font-weight: 300;
font-size: 55px;
width: 165px;
position: absolute;
left: 25px;
}


.BGDR {
letter-spacing: 4px;
line-height: 0px;
height: 0px;
}

.creative {
position: relative;
top: -25px;
}

/*mobile device*/
@media (max-width:414px){
header {
height:100px;

}

header h1 {
font-weight: 300;
font-size: 40px;
width: 165px;
position: absolute;
left: 15px;
}

.BGDR {
letter-spacing: 3px;
line-height: 0px;
height: 0px;
}

.creative {
position: relative;
top: -25px;
}
body header {
height: 80px;
background-color: pink;
}

body main {
background-color: skyblue;
display: inline-table;
width: 100%;
}

.columnDiv {
display: inline-table;
width: 50%;
height: 140px;
}

.soundLogoContainer {
background-color: grey;
}

.iAmSam {
background-color: yellow;
}

.soundIcn {
background-image: url(../assets/icons/sound_icon.svg);
background-repeat: no-repeat;
background-position: center;
height: 139px;
width: 133px;
margin: 0 auto;
}



.homeSkillContainer {
top: 0px;
width: 100%;
height: 241px;
background-color: orange;
}
.imgtextIMAKE {
position: relative;
top: 0px;
margin: 0 auto;
width: 96%;
height: 90%;
}
.iAmSam.columnDiv .myNameIsSam {
position: relative;
top: 10%;
margin: 0 auto;
height: 86%;
}
.iAmSam {
text-align: right;
}

#Artboard_1 {
}

.myNameTxt {
font-size:20px;

}

.iMakeTxt {
font-size: 21px;
letter-spacing: 2.2px;
}
.soundTxt, .animationTxt, webTxt {
font-size:25px;

}


.phototxt {
font-size:21px;
}

.webtxt {
font-size:25px;
}
.homeText {
padding-top: 0;
padding-right: 11px;
padding-left: 0;
padding-bottom: 0;
}

}



/*Tablet view*/
@media (min-width:415px) and (max-width:949px){

}



/*Desktop view*/
@media (min-width: 950px){
}


/*For the responsive menu*/

@media (max-width: 719px){

.responsMenu {
width: 40px;
height: 40px;
position: relative;
float: right;
right: 30px;
top: 30px;
}



}

@media (min-width: 719px){
.responsMenu {
display:none;
}
}


/*TEXT QUERIES*/


/*Blackberry width*/

@media (max-width: 349px){

.myNameTxt {
font-size:18.2px;

}

.iMakeTxt {
font-size: 19.6px;
letter-spacing: 1.9px;
}
.soundTxt {
font-size:25px;

}

.animationTxt {
font-size:25px;
}

.phototxt {
font-size:21px;
}

.webtxt {
font-size:25px;
}

}

Answer

Now this is called a position: absolute; on both of the elements you are describing with a position: relative; on their parent div.

This will get them both where they belong.

BTW, if you use f.e. top: 0; right: 0; there is no need for float: right;.

Best regards,

Comments