Positioning html CSS
-2
I created a rectangle with a position: relative; and positioned an icon inside. But when I create a new div class called .Home and give it a <h4>Home</h4> element with position: relative; it position the element outside of the rectangle. What am I doing wrong?
I tried changing the position value but it doesn't work.
.container {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
position: static;
}
.Rec {
width: 97px;
height: 812px;
left: 0px;
top: 0px;
background: #FFFFFF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
position: relative;
}
.icons {
position: relative;
width: 38px;
height: 48px;
left: 30px;
top: 29px;
}
.fa-bars {
color: black;
font-size: 30px;
}
.Home {
width: 65px;
height: 29px;
left: 34px;
top: 217px;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
line-height: normal;
font-size: 20px;
text-align: center;
transform: rotate(-90deg);
color: black;
position: relative
}<div class="container">
<div class="Rec">
<div class="icons"><i class="fas fa-bars"></i>
<div class="home">
<h3>Home</h3>
</div>
</div>
</div>
</div>html css
edited Jan 3 at 15:01
disinfor
3,05511929
asked Jan 3 at 2:08
Ross LintonRoss Linton
194
|
show 1 more comment
-2
I created a rectangle with a position: relative; and positioned an icon inside. But when I create a new div class called .Home and give it a <h4>Home</h4> element with position: relative; it position the element outside of the rectangle. What am I doing wrong?
I tried changing the position value but it doesn't work.
.container {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
position: static;
}
.Rec {
width: 97px;
height: 812px;
left: 0px;
top: 0px;
background: #FFFFFF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
position: relative;
}
.icons {
position: relative;
width: 38px;
height: 48px;
left: 30px;
top: 29px;
}
.fa-bars {
color: black;
font-size: 30px;
}
.Home {
width: 65px;
height: 29px;
left: 34px;
top: 217px;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
line-height: normal;
font-size: 20px;
text-align: center;
transform: rotate(-90deg);
color: black;
position: relative
}<div class="container">
<div class="Rec">
<div class="icons"><i class="fas fa-bars"></i>
<div class="home">
<h3>Home</h3>
</div>
</div>
</div>
</div>html css
edited Jan 3 at 15:01
disinfor
3,05511929
asked Jan 3 at 2:08
Ross LintonRoss Linton
194
2
can you post the HTML that goes with this? I suspect, theHomeelement is a sibling of the.Rec, rather than a child
– HolyMoly
Jan 3 at 2:13
positioning can be tricky at first, here is a quick article that may help for the long run: medium.com/@jacobgreenaway12/…
– HolyMoly
Jan 3 at 2:16
2
Hard to answer your question if we can't see the HTML.
– webkitfanz
Jan 3 at 2:33
<body> <div class="container"> <div class="Rec"> <div class="icons"><i class="fas fa-bars"></i> </div> </div> </div> </body>
– Ross Linton
Jan 3 at 3:40
Sorry about that
– Ross Linton
Jan 3 at 14:56
|
show 1 more comment
-2
-2
-2
I created a rectangle with a position: relative; and positioned an icon inside. But when I create a new div class called .Home and give it a <h4>Home</h4> element with position: relative; it position the element outside of the rectangle. What am I doing wrong?
I tried changing the position value but it doesn't work.
.container {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
position: static;
}
.Rec {
width: 97px;
height: 812px;
left: 0px;
top: 0px;
background: #FFFFFF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
position: relative;
}
.icons {
position: relative;
width: 38px;
height: 48px;
left: 30px;
top: 29px;
}
.fa-bars {
color: black;
font-size: 30px;
}
.Home {
width: 65px;
height: 29px;
left: 34px;
top: 217px;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
line-height: normal;
font-size: 20px;
text-align: center;
transform: rotate(-90deg);
color: black;
position: relative
}<div class="container">
<div class="Rec">
<div class="icons"><i class="fas fa-bars"></i>
<div class="home">
<h3>Home</h3>
</div>
</div>
</div>
</div>html css
edited Jan 3 at 15:01
disinfor
3,05511929
asked Jan 3 at 2:08
Ross LintonRoss Linton
194
I created a rectangle with a position: relative; and positioned an icon inside. But when I create a new div class called .Home and give it a <h4>Home</h4> element with position: relative; it position the element outside of the rectangle. What am I doing wrong?
I tried changing the position value but it doesn't work.
.container {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
position: static;
}
.Rec {
width: 97px;
height: 812px;
left: 0px;
top: 0px;
background: #FFFFFF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
position: relative;
}
.icons {
position: relative;
width: 38px;
height: 48px;
left: 30px;
top: 29px;
}
.fa-bars {
color: black;
font-size: 30px;
}
.Home {
width: 65px;
height: 29px;
left: 34px;
top: 217px;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
line-height: normal;
font-size: 20px;
text-align: center;
transform: rotate(-90deg);
color: black;
position: relative
}<div class="container">
<div class="Rec">
<div class="icons"><i class="fas fa-bars"></i>
<div class="home">
<h3>Home</h3>
</div>
</div>
</div>
</div>.container {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
position: static;
}
.Rec {
width: 97px;
height: 812px;
left: 0px;
top: 0px;
background: #FFFFFF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
position: relative;
}
.icons {
position: relative;
width: 38px;
height: 48px;
left: 30px;
top: 29px;
}
.fa-bars {
color: black;
font-size: 30px;
}
.Home {
width: 65px;
height: 29px;
left: 34px;
top: 217px;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
line-height: normal;
font-size: 20px;
text-align: center;
transform: rotate(-90deg);
color: black;
position: relative
}<div class="container">
<div class="Rec">
<div class="icons"><i class="fas fa-bars"></i>
<div class="home">
<h3>Home</h3>
</div>
</div>
</div>
</div>.container {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
position: static;
}
.Rec {
width: 97px;
height: 812px;
left: 0px;
top: 0px;
background: #FFFFFF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
position: relative;
}
.icons {
position: relative;
width: 38px;
height: 48px;
left: 30px;
top: 29px;
}
.fa-bars {
color: black;
font-size: 30px;
}
.Home {
width: 65px;
height: 29px;
left: 34px;
top: 217px;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
line-height: normal;
font-size: 20px;
text-align: center;
transform: rotate(-90deg);
color: black;
position: relative
}<div class="container">
<div class="Rec">
<div class="icons"><i class="fas fa-bars"></i>
<div class="home">
<h3>Home</h3>
</div>
</div>
</div>
</div>html css
html css
edited Jan 3 at 15:01
disinfor
3,05511929
asked Jan 3 at 2:08
Ross LintonRoss Linton
194
edited Jan 3 at 15:01
disinfor
3,05511929
asked Jan 3 at 2:08
Ross LintonRoss Linton
194
edited Jan 3 at 15:01
disinfor
3,05511929
edited Jan 3 at 15:01
disinfor
3,05511929
edited Jan 3 at 15:01
disinfor
3,05511929
3,05511929
asked Jan 3 at 2:08
Ross LintonRoss Linton
194
asked Jan 3 at 2:08
Ross LintonRoss Linton
194
asked Jan 3 at 2:08
Ross LintonRoss Linton
194
194
2
can you post the HTML that goes with this? I suspect, theHomeelement is a sibling of the.Rec, rather than a child
– HolyMoly
Jan 3 at 2:13
positioning can be tricky at first, here is a quick article that may help for the long run: medium.com/@jacobgreenaway12/…
– HolyMoly
Jan 3 at 2:16
2
Hard to answer your question if we can't see the HTML.
– webkitfanz
Jan 3 at 2:33
<body> <div class="container"> <div class="Rec"> <div class="icons"><i class="fas fa-bars"></i> </div> </div> </div> </body>
– Ross Linton
Jan 3 at 3:40
Sorry about that
– Ross Linton
Jan 3 at 14:56
|
show 1 more comment
2
can you post the HTML that goes with this? I suspect, theHomeelement is a sibling of the.Rec, rather than a child
– HolyMoly
Jan 3 at 2:13
positioning can be tricky at first, here is a quick article that may help for the long run: medium.com/@jacobgreenaway12/…
– HolyMoly
Jan 3 at 2:16
2
Hard to answer your question if we can't see the HTML.
– webkitfanz
Jan 3 at 2:33
<body> <div class="container"> <div class="Rec"> <div class="icons"><i class="fas fa-bars"></i> </div> </div> </div> </body>
– Ross Linton
Jan 3 at 3:40
Sorry about that
– Ross Linton
Jan 3 at 14:56
2
2
can you post the HTML that goes with this? I suspect, the
Home element is a sibling of the .Rec, rather than a child– HolyMoly
Jan 3 at 2:13
can you post the HTML that goes with this? I suspect, the
Home element is a sibling of the .Rec, rather than a child– HolyMoly
Jan 3 at 2:13
positioning can be tricky at first, here is a quick article that may help for the long run: medium.com/@jacobgreenaway12/…
– HolyMoly
Jan 3 at 2:16
positioning can be tricky at first, here is a quick article that may help for the long run: medium.com/@jacobgreenaway12/…
– HolyMoly
Jan 3 at 2:16
2
2
Hard to answer your question if we can't see the HTML.
– webkitfanz
Jan 3 at 2:33
Hard to answer your question if we can't see the HTML.
– webkitfanz
Jan 3 at 2:33
<body> <div class="container"> <div class="Rec"> <div class="icons"><i class="fas fa-bars"></i> </div> </div> </div> </body>
– Ross Linton
Jan 3 at 3:40
<body> <div class="container"> <div class="Rec"> <div class="icons"><i class="fas fa-bars"></i> </div> </div> </div> </body>
– Ross Linton
Jan 3 at 3:40
Sorry about that
– Ross Linton
Jan 3 at 14:56
Sorry about that
– Ross Linton
Jan 3 at 14:56
|
show 1 more comment
1 Answer
1
active
oldest
votes
0
You don't need parent div to be position:relative. Check out the Codepen.
<div class="container">
<div class="Rec">
<div class="icons">
<i class="fas fa-bars"></i>
<div class="home">
<h3>Home</h3>
</div>
</div>
</div>
</div>
CSS
.container {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
position: static;
}
.Rec {
width: 97px;
height: 812px;
left: 0px;
top: 0px;
background: #FFFFFF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
position: relative;
}
.icons {
width: 38px;
height: 48px;
left: 30px;
top: 29px;
}
.fa-bars {
color: black;
font-size: 30px;
}
.home {
width: 65px;
height: 29px;
left: 34px;
top: 217px;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
line-height: normal;
font-size: 20px;
text-align: center;
transform: rotate(-90deg);
color: black;
position: relative;
}
Is this what you want?
answered Jan 3 at 15:11
CrazyPasteCrazyPaste
1,6601124
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54015484%2fpositioning-html-css%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
You don't need parent div to be position:relative. Check out the Codepen.
<div class="container">
<div class="Rec">
<div class="icons">
<i class="fas fa-bars"></i>
<div class="home">
<h3>Home</h3>
</div>
</div>
</div>
</div>
CSS
.container {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
position: static;
}
.Rec {
width: 97px;
height: 812px;
left: 0px;
top: 0px;
background: #FFFFFF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
position: relative;
}
.icons {
width: 38px;
height: 48px;
left: 30px;
top: 29px;
}
.fa-bars {
color: black;
font-size: 30px;
}
.home {
width: 65px;
height: 29px;
left: 34px;
top: 217px;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
line-height: normal;
font-size: 20px;
text-align: center;
transform: rotate(-90deg);
color: black;
position: relative;
}
Is this what you want?
answered Jan 3 at 15:11
CrazyPasteCrazyPaste
1,6601124
add a comment |
0
You don't need parent div to be position:relative. Check out the Codepen.
<div class="container">
<div class="Rec">
<div class="icons">
<i class="fas fa-bars"></i>
<div class="home">
<h3>Home</h3>
</div>
</div>
</div>
</div>
CSS
.container {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
position: static;
}
.Rec {
width: 97px;
height: 812px;
left: 0px;
top: 0px;
background: #FFFFFF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
position: relative;
}
.icons {
width: 38px;
height: 48px;
left: 30px;
top: 29px;
}
.fa-bars {
color: black;
font-size: 30px;
}
.home {
width: 65px;
height: 29px;
left: 34px;
top: 217px;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
line-height: normal;
font-size: 20px;
text-align: center;
transform: rotate(-90deg);
color: black;
position: relative;
}
Is this what you want?
answered Jan 3 at 15:11
CrazyPasteCrazyPaste
1,6601124
add a comment |
0
0
0
You don't need parent div to be position:relative. Check out the Codepen.
<div class="container">
<div class="Rec">
<div class="icons">
<i class="fas fa-bars"></i>
<div class="home">
<h3>Home</h3>
</div>
</div>
</div>
</div>
CSS
.container {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
position: static;
}
.Rec {
width: 97px;
height: 812px;
left: 0px;
top: 0px;
background: #FFFFFF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
position: relative;
}
.icons {
width: 38px;
height: 48px;
left: 30px;
top: 29px;
}
.fa-bars {
color: black;
font-size: 30px;
}
.home {
width: 65px;
height: 29px;
left: 34px;
top: 217px;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
line-height: normal;
font-size: 20px;
text-align: center;
transform: rotate(-90deg);
color: black;
position: relative;
}
Is this what you want?
answered Jan 3 at 15:11
CrazyPasteCrazyPaste
1,6601124
You don't need parent div to be position:relative. Check out the Codepen.
<div class="container">
<div class="Rec">
<div class="icons">
<i class="fas fa-bars"></i>
<div class="home">
<h3>Home</h3>
</div>
</div>
</div>
</div>
CSS
.container {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
position: static;
}
.Rec {
width: 97px;
height: 812px;
left: 0px;
top: 0px;
background: #FFFFFF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
position: relative;
}
.icons {
width: 38px;
height: 48px;
left: 30px;
top: 29px;
}
.fa-bars {
color: black;
font-size: 30px;
}
.home {
width: 65px;
height: 29px;
left: 34px;
top: 217px;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
line-height: normal;
font-size: 20px;
text-align: center;
transform: rotate(-90deg);
color: black;
position: relative;
}
Is this what you want?
answered Jan 3 at 15:11
CrazyPasteCrazyPaste
1,6601124
answered Jan 3 at 15:11
CrazyPasteCrazyPaste
1,6601124
answered Jan 3 at 15:11
CrazyPasteCrazyPaste
1,6601124
answered Jan 3 at 15:11
CrazyPasteCrazyPaste
1,6601124
1,6601124
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54015484%2fpositioning-html-css%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
can you post the HTML that goes with this? I suspect, the
Homeelement is a sibling of the.Rec, rather than a child– HolyMoly
Jan 3 at 2:13
positioning can be tricky at first, here is a quick article that may help for the long run: medium.com/@jacobgreenaway12/…
– HolyMoly
Jan 3 at 2:16
2
Hard to answer your question if we can't see the HTML.
– webkitfanz
Jan 3 at 2:33
<body> <div class="container"> <div class="Rec"> <div class="icons"><i class="fas fa-bars"></i> </div> </div> </div> </body>
– Ross Linton
Jan 3 at 3:40
Sorry about that
– Ross Linton
Jan 3 at 14:56