Block Elements Not Vertically Aligning - html

I'm currently trying to develop a website. At the moment I'm trying to get the design down, but its giving me quite a tough time.
I have 5 div's. Each one contains two span's, column1 and column2. The div's are block and the span's are inline-block. However, for some reason the div's don't want to align vertically. Any help is appreciated. Also, another thing. Some of the span's inside the div's were replaced with div's. I did this because I planned on using block elements inside of those particular areas and to do that and still validate they had to be div's, not span's.
Below is my current code:
.header {
color: #AEC6CF;
font-family: gabriola;
font-weight: 900;
font-size: 50px;
position: relative;
}
/* ID */
#row1 {
width: 98%;
height: 15%;
position: absolute;
display: block;
}
#row2 {
width: 98%;
height: 2.5%;
position: absolute;
display: block;
}
#row3 {
width: 98%;
height: 70%;
position: absolute;
display: block;
}
#row4 {
width: 98%;
height: 2.5%;
position: absolute;
display: block;
}
#row5 {
width: 98%;
height: 7.25%;
position: absolute;
display: block;
}
#column1 {
border-bottom: 3px solid black;
border-right: 3px solid black;
width: 20%;
height: 100%;
left: 0;
position: absolute;
display: inline-block;
}
#column2 {
border-bottom: 3px solid black;
border-left: 3px solid black;
width: 79.8%;
height: 100%;
right: 0;
position: absolute;
display: inline-block;
}
/* Misc. */
.center {
text-align: center;
}
.right {
text-align: right;
}
.left {
text-align: left;
}
.clearfix {
float: clear;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<title>Design</title>
</head>
<body>
<div id="row1">
<div id="column1" class="clearfix">
</div>
<div id="column2" class="clearfix">
<h1 class="header center">Generic Header</h1>
</div>
</div>
<div id="row2">
<div id="column1" class="clearfix">
</div>
<div id="column2" class="clearfix">
</div>
</div>
<div id="row3">
<span id="column1" class="clearfix">
</span>
<span id="column2" class="clearfix">
</span>
</div>
<div id="row4">
<span id="column1" class="clearfix">
</span>
<span id="column2" class="clearfix">
</span>
</div>
<div id="row5">
<div id="column1" class="clearfix" style="border-bottom: 0px;">
</div>
<div id="column2" class="clearfix" style="border-bottom: 0px;">
</div>
</div>
</body>
</html>


A couple of issues... is there a reason why all of your divs are positioned absolutely? Without specific margins they all just stack ontop of each other since position: absolute; takes them out of the flow of the document. Even relative to the container, they will all be stacked inside of the container.
Secondly, your column widths add up to over 100%. You need to account for the space that the border takes up.
Here is your code without absolutely positioned divs and with adjusted column widths. Hopefully that should get you on the right track.
.header {
color: #AEC6CF;
font-family: gabriola;
font-weight: 900;
font-size: 50px;
position: relative;
}
/* ID */
#row1 {
width: 98%;
height: 15%;
display: block;
}
#row2 {
width: 98%;
height: 2.5%;
display: block;
}
#row3 {
width: 98%;
height: 70%;
display: block;
}
#row4 {
width: 98%;
height: 2.5%;
display: block;
}
#row5 {
width: 98%;
height: 7.25%;
display: block;
}
#column1 {
border-bottom: 3px solid black;
border-right: 3px solid black;
width: 20%;
height: 100%;
left: 0;
display: inline-block;
}
#column2 {
border-bottom: 3px solid black;
border-left: 3px solid black;
width: 73%;
height: 100%;
right: 0;
display: inline-block;
}
/* Misc. */
.center {
text-align: center;
}
.right {
text-align: right;
}
.left {
text-align: left;
}
.clearfix {
float: clear;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<title>Design</title>
</head>
<body>
<div id="row1">
<div id="column1" class="clearfix">
</div>
<div id="column2" class="clearfix">
<h1 class="header center">Generic Header</h1>
</div>
</div>
<div id="row2">
<div id="column1" class="clearfix">
</div>
<div id="column2" class="clearfix">
</div>
</div>
<div id="row3">
<span id="column1" class="clearfix">
</span>
<span id="column2" class="clearfix">
</span>
</div>
<div id="row4">
<span id="column1" class="clearfix">
</span>
<span id="column2" class="clearfix">
</span>
</div>
<div id="row5">
<div id="column1" class="clearfix" style="border-bottom: 0px;">
</div>
<div id="column2" class="clearfix" style="border-bottom: 0px;">
</div>
</div>
</body>
</html>

Related

CSS: the relative positioned element is now working when adding overflow-x

I want to make the images in day_time_block can cover the title class.
I also want to make all contents in day_time_block can be shown by overflow-x, but when adding overflow-x: auto; in scroll div, the images in day_time_block were covered by title div. like the following code. How to fix it?
HTML:
<html>
<body>
<div>
<div class="daily_content">
<div class="title">
<img src="https://www.google.com.hk/images/srpr/logo11w.png" class="img_title"/>
<div class="daily_title">Title</div>
</div>
<div class="scroll">
<div class="day_time_block">
<div class="day_time_text">Sunday</div>
<img src="https://www.google.com.hk/images/srpr/logo11w.png" class="daily_img"/>
</div>
<div class="day_time_block">
<div class="day_time_text">Monday</div>
<img src="https://www.google.com.hk/images/srpr/logo11w.png" class="daily_img"/>
</div>
<div class="day_time_block">
<div class="day_time_text">Tuesday</div>
<img src="https://www.google.com.hk/images/srpr/logo11w.png" class="daily_img"/>
</div>
<div class="day_time_block">
<div class="day_time_text">Wednesday</div>
<img src="https://www.google.com.hk/images/srpr/logo11w.png" class="daily_img"/>
</div>
<div class="day_time_block">
<div class="day_time_text">Thursday</div>
<img src="https://www.google.com.hk/images/srpr/logo11w.png" class="daily_img"/>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
<style>
body {
margin: 0px;
}
.title {
background: #ED3632;
height: 25px;
}
.img_title {
width: 30px;
height: 20px;
float: left;
margin-left: 15px;
margin-right: 5px;
}
.daily_title {
color: #f6ff52;
font-size: 1em;
}
.daily_content {
background: #000000;
height: 3000px;
}
.scroll {
color: #ffffff;
font-size: 1em;
width: 480px;
overflow-x: auto;
white-space: nowrap;
background-color: aqua;
border: 1px red solid;
display: flex;
}
.day_time_block {
float: left;
color: #ffffff;
font-size: 1em;
padding-left: 8px;
}
.day_time_text {
font-size: 1em;
display: inline-block;
}
.daily_img {
width: 30px;
height: 20px;
margin-left: 10px;
position: relative;
top: -10px;
}
</style>

overflow work with display:block...but if you want to use display:flex then create parent div for that and make this display:block and apply overflow on parent div.

How to center 3 divs with img and label each into other div like this image (anexo)?

I need to create a header, including some contacts for a company, and in that header I need to insert images and labels (as in the attached image), how do I create a header faithful to this layout?
Remember that the labels should be vertically centered on the divs.
I tried so far:
#head {
left: 0;
top: 0;
width: 100%;
color: white;
font-weight: bold;
}
#head_center {
/*position: relative;*/
width: 100%;
float: left;
background-color: red;
text-align: center;
display: inline-block;
}
#head_left {
width: 30%;
float: left;
}
#head_right {
width: 30%;
float: left;
}
#head_center_center {
width: 30%;
float: left;
}
<div id="head">
<div id="head_center">
<div id="head_right">
<img src="images/icons/icon_phone.png"> 47 4101 8990
</div>
<div id="head_center_center">
<img src="images/icons/icon_facebook.png"> copecdigital1
</div>
<div id="head_left">
<img src="images/icons/icon_email.png"> copec#copecdigital.com.br
</div>
</div>
</div>

To center inline elements you can use display: inline-block; and text-align: center; on the parent:
.container {
background: red;
text-align: center;
padding: 5px;
color: white;
}
.single-set {
display: inline-block;
margin: 0 10px;
vertical-align: center;
overflow: hidden;
}
i, span {
vertical-align: middle;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<div class="container">
<div class="single-set">
<i class="material-icons">face</i>
<span class="text">Text</span>
</div>
<div class="single-set">
<i class="material-icons">face</i>
<span class="text">Text</span>
</div>
<div class="single-set">
<i class="material-icons">face</i>
<span class="text">Text</span>
</div>
</div>

Form Div breaks parent div and wraps

I really need your help with this. For the life of me, I cannot begin to understand as to why I cannot seem to get my form DIV to properly be positioned on the right side of my 2 column layout.
See attached picture below:
Here is the HTML & CSS in question:
* {
font-family: Segoe UI;
font-size: 9pt;
}
html, body {
padding: 0;
margin: 0;
}
body {
background: rgb(187,195,203);
}
.Absolute-Center {
margin: auto;
}
#wrapper {
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
#layout {
height: auto;
width: 900px;
border: 1px solid rgb(112,112,112);
}
#box1 {
background: rgb(141,155,169);
color: #FFF;
padding: 3px;
font-weight: bold;
}
#box2 {
width: 100%;
background: rgb(240,240,240);
border-bottom: 1px solid rgb(180,180,180);
padding: 4px;
box-sizing: border-box;
}
#box3 {
width: 100%;
border-bottom: 1px solid rgb(180,180,180);
}
#box4 {
background: #FFF;
float: left;
width: 175px;
height: 375px;
border-right: 1px solid rgb(180,180,180);
}
#box5 {
background: rgb(240,240,240);
height: 375px;
}
#box7 {
background: rgb(240,240,240);
padding: 5px;
text-align:center;
}
#leftcolumn {
float: left;
}
#rightcolumn {
border: 0;
padding: 3px;
text-align: center;
}
.clear {
clear: both;
}
fieldset {
margin: 0;
padding: 2px;
padding-bottom: 5px;
}
div.wrapper {
width: 500px;
}
div.form {
width: 100%;
background-color: rgb(240,240,240);
border: 1px sold #000;
padding: 5px;
}
div.row {
clear: both;
padding-top: 5px;
}
div.row span.label {
float: left;
width: 50px;
text-align: right;
padding-right: 5px;
}
div.row span.formw {
float: left;
width: 200px;
text-align: left;
}
div.spacer {
clear: both;
}
span.title {
color: rgb(70,141,180);
}
input {
width: 150px;
border: 1px solid #000;
}
<div id="wrapper">
<div id="layout" class="Absolute-Center">
<div id="box1">Application Title</div>
<div id="box2">
<div id="leftcolumn"></div>
<div id="rightcolumn"></div>
<div class="clear"></div>
</div>
<div id="box3">
<!-- LEFT WINDOW PANE -->
<div id="box4">
<div id="menu_wrapper">
<ul id="menu">
<li data-show="#1">File Information</li>
<li data-show="#2">Comments</li>
</ul>
</div>
</div>
<!-- RIGHT WINDOW PANE -->
<div id="box5">
<!-- CONTENT [TAB1] -->
<div id="1" style="width: 100%;" class="hidden tab">
<div class="form">
<form>
<div style="border-bottom: 1px solid #000;" class="row"><span class="title">FILE INFORMATION</span></div>
<div class="row">
<span><b>Date Received</b></span>
</div>
<div class="row">
<span class="label">From:</span><span class="formw"><input type="text"/></span>
</div>
<div class="row">
<span class="label">To:</span><span class="formw"><input type="text"/></span>
</div>
<div class="spacer"></div>
</form>
</div>
</div>
<!-- CONTENT [TAB2] -->
<div id="2" class="hidden tab"></div>
</div>
</div>
</div>
</div>

I got it to sit in the right container by adding float:right to the form container div
Fiddle - http://jsfiddle.net/90777hu9/

It's because you float box4 left but you do not float box5 right. So it is still in the flow of the document and pushed below the float left.

Added float:left and width: 78%; to .box5 Press in the snippet the fullpage button to see it
* {
font-family: Segoe UI;
font-size: 9pt;
}
html, body {
padding: 0;
margin: 0;
}
body {
background: rgb(187,195,203);
}
.Absolute-Center {
margin: auto;
}
#wrapper {
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
#layout {
height: auto;
width: 900px;
border: 1px solid rgb(112,112,112);
}
#box1 {
background: rgb(141,155,169);
color: #FFF;
padding: 3px;
font-weight: bold;
}
#box2 {
width: 100%;
background: rgb(240,240,240);
border-bottom: 1px solid rgb(180,180,180);
padding: 4px;
box-sizing: border-box;
}
#box3 {
width: 100%;
border-bottom: 1px solid rgb(180,180,180);
}
#box4 {
background: #FFF;
float: left;
width: 175px;
height: 375px;
border-right: 1px solid rgb(180,180,180);
}
#box5 {
background: rgb(240,240,240);
height: 375px;
float:left;
width: 78%;
}
#box7 {
background: rgb(240,240,240);
padding: 5px;
text-align:center;
}
#leftcolumn {
float: left;
}
#rightcolumn {
border: 0;
padding: 3px;
text-align: center;
}
.clear {
clear: both;
}
fieldset {
margin: 0;
padding: 2px;
padding-bottom: 5px;
}
div.wrapper {
width: 500px;
}
div.form {
width: 100%;
background-color: rgb(240,240,240);
border: 1px sold #000;
padding: 5px;
}
div.row {
clear: both;
padding-top: 5px;
}
div.row span.label {
float: left;
width: 50px;
text-align: right;
padding-right: 5px;
}
div.row span.formw {
float: left;
width: 200px;
text-align: left;
}
div.spacer {
clear: both;
}
span.title {
color: rgb(70,141,180);
}
input {
width: 150px;
border: 1px solid #000;
}
<div id="wrapper">
<div id="layout" class="Absolute-Center">
<div id="box1">Application Title</div>
<div id="box2">
<div id="leftcolumn"></div>
<div id="rightcolumn"></div>
<div class="clear"></div>
</div>
<div id="box3">
<!-- LEFT WINDOW PANE -->
<div id="box4">
<div id="menu_wrapper">
<ul id="menu">
<li data-show="#1">File Information</li>
<li data-show="#2">Comments</li>
</ul>
</div>
</div>
<!-- RIGHT WINDOW PANE -->
<div id="box5">
<!-- CONTENT [TAB1] -->
<div id="1" style="width: 100%;" class="hidden tab">
<div class="form">
<form>
<div style="border-bottom: 1px solid #000;" class="row"><span class="title">FILE INFORMATION</span></div>
<div class="row">
<span><b>Date Received</b></span>
</div>
<div class="row">
<span class="label">From:</span><span class="formw"><input type="text"/></span>
</div>
<div class="row">
<span class="label">To:</span><span class="formw"><input type="text"/></span>
</div>
<div class="spacer"></div>
</form>
</div>
</div>
<!-- CONTENT [TAB2] -->
<div id="2" class="hidden tab"></div>
</div>
</div>
</div>
</div>

Layout Messing Up When I Add Text

Well, I have a problem. I have my layout exactly as I want it, but when I add text in, the layout changes. It's kind of hard to explain, so I'm going to show pictures.
Layout Before Text:
Layout After Text:
Any help is greatly appreciated
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
.header {
color: #AEC6CF;
font-family: gabriola;
font-weight: 900;
font-size: 50px;
position: relative;
}
/* ID */
#row1 {
width: 100%;
height: 15%;
}
#row2 {
width: 100%;
height: 2.5%;
}
#row3 {
width: 100%;
height: 70%;
}
#row4 {
width: 100%;
height: 2.5%;
}
#row5 {
width: 100%;
height: 9.7%;
}
#column1 {
border-bottom: 3px solid black;
border-right: 3px solid black;
width: 20%;
height: 100%;
left: 0;
display: inline-block;
margin-right: -0.25%;
}
#column2 {
border-bottom: 3px solid black;
border-left: 3px solid black;
width: 79%;
height: 100%;
right: 0;
display: inline-block;
margin-left: -0.25%;
}
/* Misc. */
.center {
text-align: center;
}
.right {
text-align: right;
}
.left {
text-align: left;
}
.clearfix {
float: clear;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<title>Test</title>
</head>
<body>
<div id="row1">
<div id="column1" class="clearfix">
</div>
<div id="column2" class="clearfix">
<h1 class="header center">See The Problem?</h1>
</div>
</div>
<div id="row2">
<div id="column1" class="clearfix">
</div>
<div id="column2" class="clearfix">
</div>
</div>
<div id="row3">
<span id="column1" class="clearfix">
</span>
<span id="column2" class="clearfix">
</span>
</div>
<div id="row4">
<span id="column1" class="clearfix">
</span>
<span id="column2" class="clearfix">
</span>
</div>
<div id="row5">
<div id="column1" class="clearfix" style="border-bottom: 0px;">
</div>
<div id="column2" class="clearfix" style="border-bottom: 0px;">
</div>
</div>
</body>
</html>

How to use CSS "display: inline-block" properly?

I have a layouting problem while using this html/css coding.
Actually I want the symbols to be vertically aligned to the center of the div.
The second layout is displaying fine with float value set to left on child divs.
Whats wrong with the first layout. Any ideas?
Here is the code
<html>
<head>
<style type="text/css">
div, p {
margin:0;
padding:0;
}
div.wrapper {
background: #FFFFFF;
border-radius: 3px;
padding: 20px;
}
/* LAYOUT 1 STYLE */
div.list1 div {
display: inline-block;
}
div.thumb1 {
border:#3C6BBC 2px solid;
border-radius: 2px;
width: 120px;
height: 120px;
}
div.symbol1 {
font-size: 25px;
width: 20px;
height: 70px;
margin: 2px;
text-align: center;
padding-top:50px;
}
/* LAYOUT 2 STYLE */
div.list2 {
overflow: hidden;
}
div.list2 div {
float: left;
}
div.thumb2 {
border:#3C6BBC 2px solid;
border-radius: 2px;
width: 120px;
height: 120px;
}
div.symbol2 {
font-size: 25px;
width: 20px;
height: 70px;
margin: 2px;
text-align: center;
padding-top:50px;
}
</style>
</head>
<body>
<div class="wrapper" id="layout1">
<h1>MAIN HEADING</h1>
<h2>Sub Heading</h2>
<div class="list1">
<div class="thumb1"></div>
<div class="symbol1"><p>+</p></div>
<div class="thumb1"></div>
<div class="symbol1"><p>+</p></div>
<div class="thumb1"></div>
<div class="symbol1"><p>=</p></div>
<div class="thumb1"></div>
</div>
</div>
<div class="wrapper" id="layout2">
<h1>MAIN HEADING</h1>
<h2>Sub Heading</h2>
<div class="list2">
<div class="thumb2"></div>
<div class="symbol2"><p>+</p></div>
<div class="thumb2"></div>
<div class="symbol2"><p>+</p></div>
<div class="thumb2"></div>
<div class="symbol2"><p>=</p></div>
<div class="thumb2"></div>
</div>
</div>
</body>
</html>

Just give vertical-align:middle to your to mentioned below class
div.list1 div {
display: inline-block;
vertical-align: middle;
}
Demo