I am having trouble centering content of one div inside of another because the content doesn't appear.
#searchbkg {
postition: relative;
width: 100%;
height: 700px;
background-color: #85e085;
}
#searchcentre {
position: absolute;
width: 50%;
margin: 0 auto;
}
<div id="searchbkg">
<div id="searchcentre">Test</div>
</div>
The green box appears but there is no text inside of it.
Your text is appearing fine, but it won't be centered because you have position: absolute; on the inside div. Change it to position: relative; and it will center horizontally. If you need the text to be centered within the div, you can also apply a text-align: center;.
#searchbkg {
position: relative;
width: 100%;
height: 700px;
background-color: #85e085;
}
#searchcentre {
position: relative;
width: 50%;
margin: 0 auto;
text-align: center;
border: 1px solid red;
}
<div id="searchbkg">
<div id="searchcentre">This is a centered div!</div>
</div>
You need to make following 3 changes to make your content in center;
You have typo in one css property inside styles of #searchbkg. There is postition while it should be position.
Remove position: absolute from #searchcentre if not needed (Absolute positioning should be used only if you wants to place one element over another).
Add text-align: center in #searchcentre.
#searchbkg{
position: relative;
width: 100%;
height: 700px;
background-color: #85e085;
}
#searchcentre{
text-align: center;
background: orange;
width: 50%;
margin: 0 auto;
}
<div id="searchbkg">
<div id="searchcentre">Test</div>
</div>
try this:
#searchbkg{
postition: relative;
width: 100%;
height: 700px;
background-color: #85e085;
text-align:center;
}
#searchcentre{
display: inline-block;
width: 50%;
}
<div id="searchbkg">
<div id="searchcentre">Test</div>
</div>
Related
How to shift a child block?
How to shift the blue block so that it stretches the parent block?
.main {
width: 400px;
min-height: 300px;
background: red;
position: relative;
}
.preMain {
width: 60px;
height: 60px;
background: blue;
position: absolute;
top: 350px;
}
<div class="main">
<div class="preMain">
</div>
</div>
Your issue is that your child block has position: absolute; meaning it no longer affects the parent div. If you want to shift the child block down but still have it affect the parent block you need to change the position of the child. Try something like this:
.main {
width: 400px;
min-height: 300px;
background: red;
position: absolute;
}
.preMain {
width: 60px;
height: 60px;
background: blue;
position: relative;
margin: 350px 0px 10px 10px;
}
Admittedly not a perfect solution but you should be able to achieve the result you're looking for.
Alternately, look to this post here
Hope this helps.
You are using position: absolute, which allows to use bottom and left to position the element correctly.
.main {
width: 400px;
min-height: 300px;
background: red;
position: relative;
}
.preMain {
width: 60px;
height: 60px;
background: blue;
position: absolute;
bottom: 10px;
left: 10px
}
<div class="main">
<div class="preMain">
</div>
</div>
I am using absolute and relative positioning to horizontally and vertically center a div in a container div. Adjacent to this container is another div which should fit neatly beside the container inside the top-level container div. But instead, it moves down, almost completely out of the boundary of the top-level div. Source code:
#top-level {
background: #90c0ff;
height: 400px;
width: 600px;
}
#container {
background: #bbffbb;
height: 400px;
width: 400px;
display: inline-block;
position: relative;
text-align: center;
}
#inner {
height: 200px;
width: 200px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 1px solid black;
}
#adjacent {
background: #ff5050;
height: 395px;
width: 195px;
display: inline-block;
}
<div id="top-level">
<div id="container">
<div id="inner">
Internal Text
</div>
</div>
<div id="adjacent">
Sample text
</div>
</div>
Example fiddle here
Any ideas on why the adjacent div doesn't align properly?
You could use flex on the parent instead of inline-block on the children, would solve the issue of the second box being pushed down if there isn't enough space:
#top-level {
background: #90c0ff;
height: 400px;
width: 600px;
}
#container {
background: #bbffbb;
height: 400px;
width: 400px;
position: relative;
text-align: center;
display: inline-block;
vertical-align:top;
}
#inner {
height: 200px;
width: 200px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 1px solid black;
}
#adjacent {
background: #ff5050;
height: 395px;
width: 195px;
display: inline-block;
vertical-align:top;
}
<div id="top-level">
<div id="container">
<div id="inner">
Internal Text
</div>
</div>
<div id="adjacent">
Sample text
</div>
</div>
If you want to know the actual reason for your alignment issues, it's because you have two inline block elements that are different heights next to each other.
The default vertical alignment for inline block elements is baseline which means that you get the effect that you see.
If you change the vertical align to top for both the container and the adjacent, your code will work as you want:
#top-level {
background: #90c0ff;
height: 400px;
width: 600px;
/* add te following */
display: flex;
justify-content: space-between;
}
#container {
background: #bbffbb;
height: 400px;
width: 400px;
position: relative;
text-align: center;
}
#inner {
height: 200px;
width: 200px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 1px solid black;
}
#adjacent {
background: #ff5050;
height: 395px;
width: 195px;
}
<div id="top-level">
<div id="container">
<div id="inner">
Internal Text
</div>
</div>
<div id="adjacent">
Sample text
</div>
</div>
I'm trying to put a div next to a fixed div, but what happens instead is the div is put inside the fixed div. How can I make it so that the div is placed next to the fixed div? I know I can use float: right with the div, but is there a way of doing it without using floats, with just inline-block? Here's the jsFiddle.
HTML
<div id='column'>
</div>
<div id='content'>
</div>
CSS
body {
height: 100%;
}
#column {
display: inline-block;
position: fixed;
width: 20%;
min-height: 100%;
background-color: red;
vertical-align: top;
z-index: -1;
}
#content {
display: inline-block;
background-color: black;
width: 100px;
height: 200px;
}
Since your fixed element is 20% wide, you can use margin-left: 20% to move #content to the right of it.
body {
height: 100%;
}
#column {
display: inline-block;
position: fixed;
width: 20%;
min-height: 100%;
background-color: red;
vertical-align: top;
z-index: -1;
}
#content {
display: inline-block;
background-color: black;
width: 100px;
height: 200px;
margin-left: 20%;
}
<div id='column'>
</div>
<div id='content'>
</div>
Tried a few things(margin-auto, text align:center etc) to centre this relative div - which is the header in my responsive layout with no luck. Any other ways to try?
The problem is keeping it centered as the page expands/contracts
Its CSS properties are
#header {
height: 170px;
width: 100%;
overflow: visible;
padding: 10px;
margin-bottom: 7px;
position: relative;
z-index: 99;
}
How can a div appear visually centered when it's 100% width of its parent?
Check out this fiddle: https://jsfiddle.net/w6332ytc/
HTML:
<div class="wrapper">
<div class="inner">
Content
</div>
</div>
CSS:
.wrapper {
width: 100%;
background: #000;
height: 300px;
}
.inner {
width: 50%;
background: red;
margin: 0 auto;
}
Issue: I am trying to make a layout with a fixed header for nag and below that will be an image that will fit the page. below that I want divs for content. the problem I am facing is that I cannot get both the image and the content divs to fit the screen and stack vertically.
The IMG is set to absolute because its the only way I could get it to 100% fit the screen without adjusting the margins. however when I do this the divs below that I am going to use for content: .body2 and .body3 do not show.
I want to get everything flush with the screen of the browser and stacked properly.
HTML:
<header>
<div id="headernav">
</div>
</header>
<div id="FixedBKG">
<img src="Images/imgbkg.JPG" id="bkgimg"/>
<div id="content">
<div class="body2">
</div>
</div>
<div id="content">
<div class="body3">
</div>
</div>
</div>
</body>
CSS:
#headernav {
height: 70px;
top: -10px;
left: 0px;
width: 100%;
background-color: black;
position: fixed;
z-index: 10;
color: white;
margin:0px auto;
}
#FixedBKG {
width: 100%;
height: 100%;
}
#bkgimg {
width: 100%;
left: 0px;
top: 0px;
position: absolute;
}
.body2 {
background-color: #C0C0C0;
height: 400px;
width: 100%;
left: 0px;
right: 0px;
display: block;
}
.body3 {
background-color: black;
height: 400px;
width: 100%;
left: 0px;
right: 0px;
display: block;
}
Ok, here's a second draft: FIDDLE.
General comments:
1.Try not to use positioning on a straight-forward layout like this one.
I changed the image to display: block and made it 100% of the div width - it will then adjust itself to the container, and you can
then adjust the container as you wish.
I changed the heights of the two lower divs and added a border so you could see them easier in the fiddle.
You really don't need the 100% widths, since divs are 100% by definition.
You might consider styling the body, and add a container element to give you more flexibility on formatting.
Let me know if you'd like to change anything else.
CSS
img {
display: block;
width: 100%;
}
#headernav {
height: 70px;
line-height: 70px;
text-align: center;
width: 100%;
background-color: black;
color: white;
}
#FixedBKG {
width: 100%;
}
.body2 {
background-color: #C0C0C0;
height: 200px;
width: 100%;
border: 1px solid red;
}
.body3 {
background-color: black;
height: 200px;
width: 100%;
border: 1px solid yellow;
}