<html lang="en">
<head>
<meta charset="utf-8">
<style>
.bluebox {
float: left;
width: 200px;
height: 200px;
margin: 1em;
border: solid black 1px;
background-color: blue;
}
.greenbox {
float: left;
width: 200px;
height: 200px;
margin: 1em;
border: solid black 1px;
background-color: green;
}
.yellowbox {
float: left;
width: 200px;
height: 200px;
margin: 1em;
border: solid black 1px;
background-color: yellow;
}
.orangebox {
float: left;
width: 200px;
height: 800px;
margin: 1em;
border: solid black 1px;
background-color: orange;
}
p {
display: inline-block;
text-align: center;
width: 600px;
border: solid 1px red;
margin-top: -50px;
padding-left: 20px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 20px;
}
</style>
<body>
<section>
<section>
<section>
<div class="bluebox"></div>
<div class="greenbox"></div>
</section>
<section>
</section>
</section>
<div class="yellowbox"></div>
</section>
<section>
<div class="orangebox"></div>
</section>
<p>Hello World! how r <strong>u?</strong></p>
</body>
</html>
enter code here
I have started working on creating this image and hit a bump on the middle portion. I can recreate in bootstrap but am trying to go at it the old fashion way. any help would be appreciated.
Try this code. Hope you want like this.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
.outerdiv{
background-color:white;
height:450px;width:450px;
display:block;
border:1px solid black;
}
.outerdiv div{position:relative;margin:3px;padding:1px;}
.blue, .green, .yellow, .black{height:100px;width:100px;display:inline-block;}
.blue{background-color:blue;}
.green{background-color:green;}
.yellow{background-color:yellow;}
.orange{background-color:orange;height:430px;width:100px;display:inline-block;vertical-align:top;float:right;}
.cyan, .green1, .green2{width:100px;}
.cyan{background-color:cyan;height:50px;}
.green1{background-color:lightgreen;height:50px;}
.green2{background-color:green;height:100px;}
.black{background-color:black;border:54px solid red;}
.inner_container1{display:inline-block;padding:0;}
.white{border:1px solid brown;height:85px;width:320px;}
</style>
</head>
<body>
<div class="outerdiv">
<div class="blue"></div>
<div class="green"></div>
<div class="yellow"></div>
<div class="orange"></div>
<div class="black"></div>
<div class="inner_container1">
<div class="cyan"></div>
<div class="green1"></div>
<div class="green2"></div>
</div>
<div class="white"></div>
</div>
</body>
</html>
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 1 year ago.
The webpage has two divs (Box1 and Box2), and Box2 contains two nested divs, Box2-1 and Box2-2.
I expect Box1 and Box2 to align side-by-side, but Box1 moves downwards and aligns with the sub-div at the bottom, Box2-2.
Please teach me why this occurs and how to fix this. Any help would be much appreciated.
#box1{
width: 200px;
height: 845px;
}
#box1, #box2{
border: 1px solid black;
display: inline-block;
margin: 0px 20px;
}
#box2-1, #box2-2{
height : 400px;
width: 200px;
border : 1px solid black;
box-sizing: border-box;
margin: 15px;
display: block
}
<!DOCTYPE html>
<html>
<head>
<title</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="box1">
<p>Box1</p>
</div>
<div id="box2">
<div class="box2" id="box2-1">
<p>Box2</p>
</div>
<div class="box2" id="box2-2">
<p>Box3</p>
</div>
</div>
</body>
</html>
add vertical-align:top; on #box1, #box2
#box1, #box2{
border: 1px solid black;
display: inline-block;
margin: 0px 20px;
vertical-align:top;
}
#box1{
width: 200px;
height: 845px;
}
#box1, #box2{
border: 1px solid black;
display: inline-block;
margin: 0px 20px;
vertical-align:top;
}
#box2-1, #box2-2{
height : 400px;
width: 200px;
border : 1px solid black;
box-sizing: border-box;
margin: 15px;
display: block
}
<!DOCTYPE html>
<html>
<head>
<title</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="box1">
<p>Box1</p>
</div>
<div id="box2">
<div class="box2" id="box2-1">
<p>Box2</p>
</div>
<div class="box2" id="box2-2">
<p>Box3</p>
</div>
</div>
</body>
</html>
I think this is what you want;
#main-div {
display: flex;
justify-content: space-evenly;
}
#box1 {
border: 1px solid black;
}
#box2 {
border: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<title</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="main-div">
<div id="box1">
<p>Box1</p>
</div>
<div id="box2">
<div class="box2" id="box2-1">
<p>Box2</p>
</div>
<div class="box2" id="box2-2">
<p>Box3</p>
</div>
</div>
</div>
</body>
</html>
Please comment if you need explanation on this.
You can use css flexbox to easily achieve this.
Wrap box1 and box2 in a div with class of wrapper and in your css set the display property to flex;
You can read more about css flexbox here, it is used for arranging boxes in a html page.
.wrapper {
display: flex;
}
#box1{
width: 200px;
height: 845px;
}
#box1, #box2{
border: 1px solid black;
display: inline-block;
margin: 0px 20px;
}
#box2-1, #box2-2{
height : 400px;
width: 200px;
border : 1px solid black;
box-sizing: border-box;
margin: 15px;
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div id="box1">
<p>Box1</p>
</div>
<div id="box2">
<div class="box2" id="box2-1">
<p>Box2</p>
</div>
<div class="box2" id="box2-2">
<p>Box3</p>
</div>
</div>
</div>
</body>
</html>
It's because you have block level elements inside inline elements. You can read about it here.
One way around this would be to use
position: relative;
float: left;
instead of display: inline-block for divs box1 and box2.
Try it out:
#box1 {
width: 200px;
height: 845px;
}
#box1, #box2 {
position: relative;
float: left;
border: 1px solid black;
margin: 0px 20px;
}
#box2-1, #box2-2 {
height : 400px;
width: 200px;
border : 1px solid black;
box-sizing: border-box;
margin: 15px;
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="box1">
<p>Box1</p>
</div>
<div id="box2">
<div class="box2" id="box2-1">
<p>Box2</p>
</div>
<div class="box2" id="box2-2">
<p>Box3</p>
</div>
</div>
</body>
</html>
While the other answers have done a brilliant job of fixing the properties and values in CSS. I think we can achieve something similar using the table tag of HTML:
<!DOCTYPE html>
<html>
<head>
<title</title>
<!-- <link href="style.css" rel="stylesheet"> -->
</head>
<body id="body">
<table>
<tr>
<td rowspan="2">Box1</td>
<td>Box2</td>
</tr>
<tr><td>Box3</td></tr>
</table>
</body>
</html>
Your current output looks like this :
Note : Your Box-1 is shifted below because your Box2-1 and Box2-2 are marked as display: block. Please refer Image-2 (below) with display: inline-block.
Image-1 :
Image-2
Updated style for box2-1 and box2-2 :
#box2-1, #box2-2{
height : 400px;
width: 200px;
border : 1px solid black;
box-sizing: border-box;
margin: 15px;
display: inline-block;
}
Trying to reach criteria:
have the text to the left of the circle, vertically aligned; circles to the right (in-line) with the text; the circles themselves will also have text/numbers inside.
I am trying to code sample text and circles with numbers for what I have in the image below. However, I can not figure out the alignments:
Below is the code I currently have:
#feedbox-left {
margin-left: 2vh;
margin-top: 5vh;
width: 19vw;
height: 80vh;
background: transparent;
border: 1px solid black;
border-radius: 1%;
}
.fb-hr {
margin-top: 40vh;
height: 0.15vh;
background-color: hsla(0, 0%, 64%, 0.227);
}
.trackcircle {
/* display: inline; */
height: 60px;
width: 60px;
background-color: transparent;
border: 1px solid black;
border-radius: 50%;
margin-top: 50%;
}
.trackcircle:first-child {
margin-top: 40%;
}
.tracktext {
display: flex;
justify-content: space-evenly;
}
<section class="feedbox">
<div id="feedbox-left">
<div></div>
<hr class="fb-hr" />
<div id="trackers">
<div class="trackdiv">
<p class="tracktext">Test <span class="trackcircle"></span></p>
</div>
<div class="trackdiv">
<p class="tracktext">Test <span class="trackcircle"></span></p>
</div>
<div class="trackdiv">
<p class="tracktext">Test <span class="trackcircle"></span></p>
</div>
</div>
</section>
How can I align the items like I have in the picture?
Output
.parent{
border:2px solid #aaa;
width: 400px;
padding: 20px;
}
h1{text-align: center;text-decoration: underline;}
.row{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.text{width: 80%;}
.circle{
border:4px solid #aaa;
width: 40px;
text-align: center;
height: 40px;
border-radius: 50%;
font-size: 30px;
}
<!DOCTYPE html>
<html>
<head>
<title>title</title>
</head>
<body>
<div class="parent">
<h1>Current tracks</h1>
<div class="row">
<div class="text">Lorem ipsum dolor sit amet </div>
<div class="circle">1</div>
</div>
<div class="row">
<div class="text">Second row and text here</div>
<div class="circle">2</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.circle {
border-radius: 50%;
width: 34px;
height: 34px;
padding: 10px;
background: #fff;
border: 3px solid #000;
color: #000;
text-align: center;
font: 32px Arial, sans-serif;
}
</style>
</head>
<body>
<div class="circle">1</div>
</body>
</html>
I just started learning HTML and CSS. And I got a problem. Perhaps she is not worth attention, but still I ask for help. The problem is that the word "Hi" stubbornly does not want to be displayed in its block. And I don’t know how to remove the gap over the header. And sorry for the poor code architecture.
HTML:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title></title>
</head>
<body>
<header>
<div class="header">
</div>
</header>
<div class="body">
<div class="all">
<div class="cat">
<h1 acolor>Hi</h1>
</div>
<div class="categ">
<div class="mycat">
<div class="com">
<p class="color"><h3></h3></p>
</div>
<div class="com">
<p class="color"><h3></h3></p>
</div>
<div class="come">
<p class="color">
<h4></h4>
</p>
</div>
<div class="com">
<p class="color">
</p>
</div>
</div>
</div>
</div>
</div>
<main>
</main>
</div>
<footer>
<div class="footer"></div>
</footer>
</body>
</html>
CSS:
.header{
width: 1922px;
height: 109px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
background-color: #3f4246;
}
.footer{
width: 1928px;
height: 534px;
background-color: #202326;
}
.body{
width: 1920px;
height: 3240px;
background-color: #ffffff;
}
.all{
width: 1170px;
height: 700px;
}
.categ{
width: 273px;
height: 514px;
}
.cat{
width: 273px;
height: 50px;
background-color: #86b817;
margin-left: 391px;
padding-top: 50px;
}
.mycat{
width: 274px;
height: 473px;
background-color: ;
margin-left: 391px;
}
.com{
width: 269px;
height: 45px;
border: 2px solid black;
margin: 0px;
}
.color{
color: #000000;
}
.acolor{
color: black;
text-align: right ;
font-weight: 900;
}
h1 .acolor{
color: red;
}
.come{
width: 269px;
height: 65px;
border: 2px solid black;
margin: 0px;
}
I slightly cleaned your code and needs good attention, no need to use p within h2 tags:
body {
margin: 0;
}
.header {
width: 1922px;
height: 109px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
background-color: #3f4246;
}
.footer {
width: 1928px;
height: 534px;
background-color: #202326;
}
.body {
width: 1920px;
height: 3240px;
background-color: #ffffff;
}
.all {
width: 1170px;
height: 700px;
}
.categ {
width: 273px;
height: 514px;
}
.cat {
width: 273px;
height: 50px;
background-color: #86b817;
margin-left: 391px;
font-weight: 900;
text-align: center;
font-size: 40px;
vertical-align: center;
}
.mycat {
width: 274px;
height: 473px;
background-color: ;
margin-left: 391px;
}
.com {
width: 269px;
height: 45px;
border: 2px solid black;
margin: 0px;
}
.color {
color: #000000;
}
h1 .acolor {
color: red;
}
.come {
width: 269px;
height: 65px;
border: 2px solid black;
margin: 0px;
}
<body>
<header>
<div class="header">
</div>
</header>
<div class="body">
<div class="all">
<div class="cat">
Hi
</div>
<div class="categ">
<div class="mycat">
<div class="com">
<p class="color"></p>
</div>
<div class="com">
<p class="color"></p>
</div>
<div class="come">
<p class="color">
</p>
</div>
<div class="com">
<p class="color">
</p>
</div>
</div>
</div>
</div>
<main>
</main>
<footer>
<div class="footer"></div>
</footer>
You can remove height for .cat class and remove margin for h1 tag as
.cat{
width: 273px;
/*height: 50px;*/
background-color: #86b817;
margin-left: 391px;
padding-top: 50px;
}
.cat h1{
margin: 0;
}
.header{
width: 1922px;
height: 109px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
background-color: #3f4246;
}
.footer{
width: 1928px;
height: 534px;
background-color: #202326;
}
.body{
width: 1920px;
height: 3240px;
background-color: #ffffff;
}
.all{
width: 1170px;
height: 700px;
}
.categ{
width: 273px;
height: 514px;
}
.cat{
width: 273px;
/*height: 50px;*/
background-color: #86b817;
margin-left: 391px;
padding-top: 50px;
}
.mycat{
width: 274px;
height: 473px;
background-color: ;
margin-left: 391px;
}
.com{
width: 269px;
height: 45px;
border: 2px solid black;
margin: 0px;
}
.color{
color: #000000;
}
.acolor{
color: black;
text-align: right ;
font-weight: 900;
}
h1 .acolor{
color: red;
}
.come{
width: 269px;
height: 65px;
border: 2px solid black;
margin: 0px;
}
.cat h1{
margin: 0;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title></title>
</head>
<body>
<header>
<div class="header">
</div>
</header>
<div class="body">
<div class="all">
<div class="cat">
<h1 acolor>Hi</h1>
</div>
<div class="categ">
<div class="mycat">
<div class="com">
<p class="color"><h3></h3></p>
</div>
<div class="com">
<p class="color"><h3></h3></p>
</div>
<div class="come">
<p class="color">
<h4></h4>
</p>
</div>
<div class="com">
<p class="color">
</p>
</div>
</div>
</div>
</div>
</div>
<main>
</main>
</div>
<footer>
<div class="footer"></div>
</footer>
</body>
</html>
I'm new to coding, this is my first week in my Fullstack course and we have some homework that I've been working on for a while now. I've managed to get my wireframe to look similar to the homework example (we're supposed to make it look the same) and I'm not sure where I'm going wrong with this html/css code.
Also, I'm not sure exactly how else to show what I am working on other than posting the majority of my css, so i apologize if I do this wrong.
:)
I've placed red borders around the content I'm attempting to align evenly on all sides. I've tried changing the padding, margins, float positions, width (all that I know that would adjust the box(es), but I still cannot seem to get the "aside" content to align with the rest of the wireframe objects.
`````HTML````
<header class="main-head">
<p>header</p>
</header>
<link rel="stylesheet" href="style.css">
<nav>nav</nav>
<div class="divCont">
<div class="aside1">
<aside>aside</aside>
</div>
<div>
<div>
<article class="sect1">section
<p class="art1">article</p>
<div class="inside1">
<h3>h1, h2, h3</h3>
</div>
<div class="paraCont">
<p class="para1">p</p>
</div>
</article>
</div>
</div>
</div>
<footer>footer</footer>
``` </div>
`````````external css```````````````````
body {
margin: auto;
width: 50%;
background-color: #777;
text-align: center;
}
div.layout {
width: 495px;
}
/* left section */
.sect1 {
padding: 2%;
width: 100%;
}
/* right section */
div.aside1 {
margin-left: 100px;
border: solid red;
padding: 2%;
color: #777;
width: 200px;
height: 165px;
float: right;
font-size: 18px;}
article {
color:#777;
font-size: 18px;
background-color: #ebebeb;
}
div.divCont {
border: solid red;
}
/* article box */
.art1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
/* h1,h2,h3 box */
.inside1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
/* para box */
p.para1 {
width: 60%;
color:#ebebeb;
background-color: #777;
}
body {
margin: auto;
width: 50%;
background-color: #777;
text-align: center;
}
div.layout {
width: 495px;
}
/* left section */
.sect1 {
padding: 2%;
width: 100%;
}
/* right section */
div.aside1 {
margin-left: 100px;
border: solid red;
padding: 2%;
color: #777;
width: 200px;
height: 165px;
float: right;
font-size: 18px;
}
article {
color: #777;
font-size: 18px;
background-color: #ebebeb;
}
div.divCont {
border: solid red;
}
/* article box */
.art1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
/* h1,h2,h3 box */
.inside1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
/* para box */
p.para1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
<div class="layout">
<header class="main-head">
<p>header</p>
</header>
<link rel="stylesheet" href="style.css">
<nav>nav</nav>
<div class="divCont">
<div class="aside1">
<aside>aside</aside>
</div>
<div>
<div>
<article class="sect1">section
<p class="art1">article</p>
<div class="inside1">
<h3>h1, h2, h3</h3>
</div>
<div class="paraCont">
<p class="para1">p</p>
</div>
</article>
</div>
</div>
</div>
<footer>footer</footer>
</div>
this is what I'm trying to do - https://gyazo.com/6f27f40e4f3e75831b5e4728387ea11f
this is what I've done so far - https://gyazo.com/79299a16a0eb2208db98519005b3bf9d
This is just a quick edit. Also your link tag should be above in tag
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
margin: auto;
width: 50%;
background-color: #777;
text-align: center;
}
div {
border: 1px solid #000000;
}
.aside1 {
width: 49%;
float: left;
height: 165px;
}
.aside2 {
width: 49%;
float: right;
height: 165px;
}
article {
background-color:green;
padding: 20px;
margin: 5px
}
footer {
width: 100%;
}
</style>
</head>
<body>
<header class="main-head">
<p>header</p>
</header>
<nav>nav</nav>
<section class="divCont">
<div class="aside1">
<p>Section</p>
<article>
Article
<div style="background-color:white; margin: 5px;">
H1,h2,H3
</div>
<div style="background-color:yellow;margin: 5px; ">
p
</div>
</article>
</div>
<div class="aside2">
Aside
</div>
</section>
<footer> Footer </footer>
</body>
</html>
I have following HTML layout
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
margin:10px 0px 0px 0px;
font-size: 11px;
font-family: Arial,Tahoma, sans-serif;
background: #fff;
color: #444;
}
h1 {
font-size:1.5em;
font-weight: bold;
}
#container {
width: 920px;
margin: 0 auto;
background-color: red
}
#header {
border: 2px solid #ccc;
height: 80px;
}
#content{
display: block;
width: 100%
}
#left {
clear: left;
float: left;
width: 660px;
border: 2px solid #ccc;
margin:0 0 10px 0;
padding:20px;
}
#right {
position: relative;
margin: 0 5px 0 5px;
padding: 5px 0px 0px 0px;
float: right;
width: 200px;
border: 2px solid #ccc;
}
#footer {
clear: both;
border: 2px solid #ccc;
padding: 10px 0 20px 0;
margin: 20px 0 0 0;
font-size: .9em;
color: #9b9b9b;
width: 100%;
background-color: skyblue;
}
</style>
</head>
<body>
<div id="container">
<div id="header" >
<h1>Header</h1>
</div>
<div id="content">
<div id="left">
<h1>Left</h1>
</div>
<div id="right">
<h1>Right</h1>
</div>
</div>
</div>
<div id="footer">
<h1>Footer</h1>
</div>
</body>
</html>
My problem is #container doesn’t hold the #left & #right contents, it only holds #header
Please refer attached imaged to see what my intended layout is.
You can add an empty element that has 'clear:both' at the end of the container:
<div id="container">
<div id="header" >
<h1>Header</h1>
</div>
<div id="content">
<div id="left">
<h1>Left</h1>
</div>
<div id="right">
<h1>Right</h1>
</div>
<div style="clear:both"> </div>
</div>
</div>
I was able to achieve the intended result by using overflow: hidden; property
#container {
width: 920px;
margin: 0 auto;
background-color: red;
overflow: hidden;
}
Use a clearfix solution i.e.
common un-obtrusive clearfix solution