can you please help to get the below output in div using css. if you can customize more it will be much more help full.
You could do something like this using Flexbox:
body {
padding: 5%;
}
.back-div {
width: 500px;
height: 200px;
border: 1px solid black;
display: flex;
flex-direction: column;
align-items: center;
}
.blue {
background: blue;
width: 400px;
height: 100px;
margin-bottom: 100px;
flex-shrink: 0;
margin-top: -45px;
text-align: center;
}
.yellow {
background: yellow;
width: 400px;
height: 100px;
flex-shrink: 0;
text-align: center;
}
<div class="back-div">
<div class="blue">
<h1> Text 1</h1>
</div>
<div class="yellow">
<h1> Text 2</h1>
</div>
</div>
Fiddle: https://jsfiddle.net/jdzgsxg4/
Related
I made a quick wireframe of what I'm trying to create down below.
I'm simply trying to just highlight 25% of the left side of the childDiv to be green, and 65% of the right side to be red.
I want to establish the correct spaces to have the left childInnerDiv to be green, and right childInnerDiv to be red. But it doesn't seem to work...
What I'm trying to Create:
What I have:
JsFiddle: http://jsfiddle.net/8vhgq6k3/
HTML Code
<div class="ProjectsParentDiv">
<div class="childDiv">
Foo
<div class="childInnerDiv left">
</div>
<div class="childInnerDiv right">
</div>
</div>
<div class="childDiv">
Bar
</div>
<div class="childDiv">
Baz
</div>
</div>
CSS Code
.ProjectsParentDiv {
// position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: max-width;
height: 40%;
border: 1px solid black;
}
.childDiv {
display: flex;
background-color: lightblue;
width: 75%;
height: 150px;
margin: 5px auto;
}
.childInnerDiv {
//trying to make the childInnerDiv to be 95% height & width. of the ChildDiv
height: 95%;
width: 95%;
}
.childInnerDiv.left {
flex: 25; //25% of the left side is a div for image.
background: green;
border: 1px solid yellow;
}
.childInnerDiv.right {
flex: 65; //65% of right side is a div for description
background: red;
border: 1px solid silver;
}
You can do below.
.ProjectsParentDiv {
// position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: max-width;
height: 40%;
border: 1px solid black;
}
.childDiv {
align-items: center;
display: flex;;
justify-content: space-around;
background-color: lightblue;
width: 75%;
height: 150px;
margin: 5px auto;
}
.childInnerDiv {
display: flex;
height: 95%;
}
.childInnerDiv.left {
width: 25%;
background-color: green;
border: 1px solid yellow;
}
.childInnerDiv.right {
width: 65%;
background-color: red;
border: 1px solid silver;
}
<div class="ProjectsParentDiv">
<div class="childDiv">
<div class="childInnerDiv left">
</div>
<div class="childInnerDiv right">
</div>
</div>
<div class="childDiv">
Bar
</div>
<div class="childDiv">
Baz
</div>
</div>
i've making a layout using flexbox of a how a typical website looks like ,but i've got a few questions and a couple problems . My first question is that how can i improve this layout? and the problem I'm having is that i cant put the main__content in color black in between aside..
*{
margin: 0;
padding:0;
line-height: 1.3em;
color: black;
font-size: 40px;
}
body{
background: lightslategray;
}
.header{
display: flex;
}
.zero{
height: 100vh;
width: 200px;
background: violet;
}
.one{
height: 200px;
width: 200px;
background: blue;
flex-grow: 2;}
.two{
height: 200px;
width: 200px;
background: red;
flex-grow: 2;
}
.aside {
display: flex;
}
.three{
height: 200px;
width: 200px;
background: green;
}
.four{
height: 100vh;
width: 200px;
background: yellow;
margin-left: auto;
}
.main .content{
height: 50vh;
width: 40vh;
background-color: black;
}
<body>
<div class="header">
<div class="one">content</div>
<div class="two">content</div>
<div class="three">content</div>
</div>
<div class="aside">
<div class="zero">sidebar</div>
<div class="four">sidebar</div>
</div>
<div class="main">
<div class="content">Main__content</div>
</div>
</body>
Here your are trying to apply styles to both the main and content
.main .content{
height: 50vh;
width: 40vh;
background-color: black;
}
so the child div (content) has height and width same as its parent div(main)
Try to apply:
.main {
height: 50vh;
width: 40vh;
background-color: black;
}
.content {
color: brown;
height: 100px;
font-size: 20px;
}
There are a few divs. I want to set width of black as needed and put it on the middle (horizontally) of red. Then put some elements in black in one line and position them on the middle (vertically) of black.
The final result should looks like:
There is a problem with center vertically.
My code is:
<html>
<body>
<div id="mainContainer">
<div id="singleOptions">
<div id="myObject"></div>
<div id="mySecondObject"></div>
</div>
</div>
</body>
<style>
#mainContainer {
background: red;
width: 100px;
height: 100px;
margin-top: 50px;
text-align: center;
}
#singleOptions {
height: 100%;
background: black;
display: inline-block;
}
#myObject {
width: 10px;
display: inline-block;
height: 10px;
background: green;
}
#mySecondObject {
width: 10px;
display: inline-block;
height: 10px;
background: yellow;
}
</style>
</html>
How is it possible to get this effect?
You can try it like this
#mainContainer {
background: red;
width: 100px;
height: 100px;
margin-top: 50px;
text-align: center;
}
#singleOptions {
height: 100%;
background: black;
display: flex;
margin: 0 auto;
justify-content: space-between;
width: min-content;
align-items: center;
}
#myObject {
width: 10px;
display: inline-block;
height: 10px;
margin-right: 5px;
background: green;
}
#mySecondObject {
width: 10px;
display: inline-block;
height: 10px;
background: yellow;
}
<html>
<body>
<div id="mainContainer">
<div id="singleOptions">
<div id="myObject"></div>
<div id="mySecondObject"></div>
</div>
</div>
</body>
</html>
You can achieve this using flexbox:
#mainContainer {
background: red;
width: 100px;
height: 100px;
text-align: center;
display: flex;
justify-content: center;
}
#singleOptions {
height: 100%;
background: black;
display: flex;
align-items: center;
}
#myObject {
width: 10px;
display: inline-block;
height: 10px;
background: green;
}
#mySecondObject {
width: 10px;
display: inline-block;
height: 10px;
background: yellow;
}
<div id="mainContainer">
<div id="singleOptions">
<div id="myObject"></div>
<div id="mySecondObject"></div>
</div>
</div>
This is solved easily with Flexbox.
Change your CSS for #singleOptions as follows.
#singleOptions {
height: 100%;
background-color: black;
display: flex;
justify-content: space-between;
align-items: center;
}
I would like all my element to have the same height and the separator to cover all the height. How can I achieve that please ?
The separator is pink, you can see it here with a height: 5em
.daddy {
height: 10em;
width: 10em;
}
.container {
width: auto;
height: auto;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: center;
border: 1px solid lightgrey;
}
.child1 {
width: 3em;
height: 10em;
background-color: red;
}
.child2 {
width: 3em;
height: 15em;
background-color: blue;
}
.separator {
width: 10px;
height: 5em;
background-color: pink;
}
<div class="daddy">
<div class="container">
<div class="child1"></div>
<div class="separator"></div>
<div class="child2"></div>
</div>
</div>
If you remove the align items from container, all three columns will grow to fill the row
.daddy {
height: 10em;
width: 10em;
}
.container {
width: auto;
height: auto;
display: flex;
flex-direction: row;
border: 1px solid lightgrey;
justify-content:center;
}
.child1 {
width: 3em;
background-color: red;
height: 10em; /* this is just to give it some height as no column currently has any height */
}
.child2 {
width: 3em;
background-color: blue;
}
.separator {
width: 10px;
background-color: pink;
}
<div class="daddy">
<div class="container">
<div class="child1">
</div>
<div class="separator">
</div>
<div class="child2">
</div>
</div>
</div>
I want "About This Page" and "Around the web" to be horizontally aligned.
Also, open to any suggestions for improving this snippet of code. I just want to have a responsive / simple two column layout behind a wide colored background.
.footer-above {
width: 100%;
height: 200px;
background-color: #aaa;
padding-top: 30px;
padding-bottom: 30px;
color: white;
font-size: 20px;
}
.footer-links,
.built-with {
display: inline-block;
max-width: 40%;
height: 100%;
border: 2px solid black;
}
.container {
margin: 0 auto;
width: 500px;
height: 100%;
}
<div class="footer-above">
<div class="container">
<div class="built-with">
<h3>ABOUT THIS PAGE</h3>
<p> Made with HTML5Boilerplate</p>
</div><!--built-with-->
<div class="footer-links">
<h3>AROUND THE WEB</h3>
</div><!--footer-links-->
</div><!--container-->
</div><!-- footer-above -->
I would recommend using flexbox for this, which can be achieved by simply adding:
.container {
display: flex;
align-items: center;
justify-content: center;
}
If you want to have both boxes occupy the same height, you'll need a fixed height on .footer-links and .built-with. I've gone with 150px in the following example:
.footer-above {
width: 100%;
height: 200px;
background-color: #aaa;
padding-top: 30px;
padding-bottom: 30px;
color: white;
font-size: 20px;
}
.footer-links,
.built-with {
display: inline-block;
max-width: 40%;
height: 150px;
border: 2px solid black;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
<div class="footer-above">
<div class="container">
<div class="built-with">
<h3>ABOUT THIS PAGE</h3>
<p> Made with HTML5Boilerplate</p>
</div><!--built-with-->
<div class="footer-links">
<h3>AROUND THE WEB</h3>
</div><!--footer-links-->
</div><!--container-->
</div><!-- footer-above -->
Flexbox has support in every browser apart from Internet Explorer (though it's coming to IE as well). If you'd like to support Internet Explorer as well, you can use vertical-align: middle along with display: inline-block, as is demonstrated in this answer.
Hope this helps! :)
Simply use flex. Read about it here
.footer-above {
width: 100%;
height: 200px;
background-color: #aaa;
padding-top: 30px;
padding-bottom: 30px;
color: white;
font-size: 20px;
}
.footer-links,
.built-with {
display: inline-block;
max-width: 40%;
height: 100%;
border: 2px solid black;
}
.container {
margin: 0 auto;
width: 500px;
height: 100%;
display: inline-flex;
}
<div class="footer-above">
<div class="container">
<div class="built-with">
<h3>ABOUT THIS PAGE</h3>
<p> Made with HTML5Boilerplate</p>
</div><!--built-with-->
<div class="footer-links">
<h3>AROUND THE WEB</h3>
</div><!--footer-links-->
</div><!--container-->
</div><!-- footer-above -->
Use table-cell as display property
.footer-links,
.built-with {
display: table-cell;
max-width: 40%;
height: 100%;
border: 2px solid black;
}
I think , it'll horizontally aligned these boxes
this is based off of obsidian ages answer since it wasn't updated to match my exact question.
I edited .footer-above to 1400px since width:100% with code doesn't scale as viewport width changes.
Also, it should be align-items: flex-start; on container class, since i want a baseline at the top of parent div
.footer-above {
width: 1400px;
height: 200px;
background-color: #aaa;
padding-top: 30px;
padding-bottom: 30px;
color: white;
font-size: 20px;
}
.footer-links,
.built-with {
display: inline-block;
width: 40%;
height: 150px;
border: 2px solid black;
}
.container {
margin: 0 auto;
width: 960px;
display: flex;
align-items: flex-start;
justify-content: center;
}
<div class="footer-above">
<div class="container">
<div class="built-with">
<h3>ABOUT THIS PAGE</h3>
<p> Made with HTML5Boilerplate</p>
</div><!--built-with-->
<div class="footer-links">
<h3>AROUND THE WEB</h3>
</div><!--footer-links-->
</div><!--container-->
</div><!-- footer-above -->