I'm trying to build a 3 column div and center all of them inside a wrapper but the div.left and div.right wont stay at the top when the div.middle has text in & when i replace display: inline-block to float: left they stop centering, what could i do so they all center and stay at the top?
example
the html:
<div class="left">
</div>
<div class="middle">
example <p>
example <p>
example <p>
example <p>
example <p>
example <p>
example <p>
</div>
<div class="right">
</div>
</div>
</body>
the css:
.wrapper {
margin-left: auto;
margin-right: auto;
width: 100%;
text-align: center;
}
img {
width: 200px;
height: 200px;}
div.left, div.right {
margin: 3px;
border: 1px solid #0000ff;
display: inline-block;
width: 18%;
padding: 1px;
background: red;
}
div.middle {
margin: 3px;
border: 1px solid #0000ff;
display: inline-block;
width: 60%;
padding: 1px;
background: red;
}
Try using vertical-align
Working Example
div.left, div.right {
margin: 3px;
border: 1px solid #0000ff;
display: inline-block;
width: 18%;
padding: 1px;
background: red;
vertical-align: top; /* see here */
}
MDN documentation for vertical-align
Just do vertical-align: top; on the left/right like this:
http://jsfiddle.net/RJR2V/2/
But if you want them to be even in heights than I suggest display: table-cell;
Like this:
http://jsfiddle.net/RJR2V/1/
under .wrapper all div should be vertical-aligned to top
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.wrapper {
margin-left: auto;
margin-right: auto;
width: 100%;
text-align: center;
}
img {
width: 200px;
height: 200px;
}
div.left, div.right {
margin: 3px;
border: 1px solid #0000ff;
display: inline-block;
width: 18%;
padding: 1px;
background: red;
}
div.middle {
margin: 3px;
border: 1px solid #0000ff;
display: inline-block;
width: 60%;
padding: 1px;
background: red;
}
.wrapper div{
vertical-align:top;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="left">
</div>
<div class="middle">
example <p>
example
<p>
example
<p>
example
<p>
example
<p>
example
<p>
example
<p>
</div>
<div class="right">
</div>
</div>
</body>
</html>
Related
This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Closed 2 years ago.
I drew this in microsoft paint and wanted to make this in html/css
The numbers labeled are the box numbers
This is what I've done to try to achieve this
html file
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="box.css">
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3">
<div id="box4"></div>
<div id="box5"></div>
<div id="box6"></div>
<div id="box7"></div>
<div id="box8"></div>
</div>
</body>
</html>
css file
html, body {
margin: 0px;
height: 100%;
width: 100%;
}
#box1 {
border: solid black 3px;
height: 10%;
}
#box2 {
border: solid black 3px;
height: 3%;
}
#box3 {
border: solid black 3px;
height: 84%;
}
#box4 {
border: solid black 1px;
width: 50%;
height: 95%;
float: left;
margin: 5px;
}
#box5 {
border: solid black 1px;
width: 23%;
height: 25%;
float:left;
margin-left: 10px;
margin-top: 6px;
}
#box6 {
border: solid black 1px;
width: 23%;
height: 30%;
float:left;
margin-top: 10px;
margin-left: 10px;
}
#box7 {
border: solid black 1px;
width: 23%;
height: 30%;
float:left;
margin-top: 10px;
margin-left: 10px;
}
How it looks
I couldn't get box8 to show up on the right side I tried float right it messes it up. Also the boxes inside box3 are all inconsistent. If I full screen the boxes go right side. I used percentages for responsiveness but it didn't work. Anyone know how to do this ?
This can be achieved with flexbox - but note that you will need to use wrapper divs and apply different flex-directions to each in order to make the grid layout work.
body, html {
height: 100%;
width: 100%;
overflow: hidden;
}
.box-wrapper {
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
}
#box1 {
padding:10px;
height:30px;
line-height:30px;
border: solid 1px red
}
#box2 {
height: 15px;
padding: 8px;
border: solid 1px blue
}
#box3 {
padding: 10px;
flex-grow:1;
display: flex;
flex-direction: row;
border: solid 1px green
}
#box4 {
flex-grow:2;
border: solid 1px orange
}
.middle-column {
flex-grow:1;
display: flex;
flex-direction: column;
}
.middle-column div{
flex-grow:1;
margin: 0 8px;
border: solid 1px #6e6e6e;
}
.middle-column div + div {
margin-top: 8px
}
#box8 {
flex-grow:1;
border: solid 1px black
}
<div class="box-wrapper">
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">
<div id="box4">4</div>
<div class="middle-column">
<div id="box5">5</div>
<div id="box6">6</div>
<div id="box7">7</div>
</div>
<div id="box8">8</div>
</div>
</div
I've got a group of three elements. Section, that contain a header and a div element. Now what I want to do is to add another div element within the div element, but when I do that both elements move down (dislocate from when they supposed to be).
HTML:
<div class="main"><!-- main container -->
<section class="head"><!-- header section -->
<header class="img_header">
<img src="../img/d.jpg">
</header>
<div id="head_container">
<div class="side_header">
<h class="mark">Damian</h> Tuszynski<br>
Network Solutions Architect
<p>
Mobile<br>
</p>
<p>
Email<br>
</p>
</div>
</div>
</section><!-- header section -->
</div>
CSS, for the header group:
.head {
border: 1px solid green;
white-space: nowrap;
width:1900px;
height:900px;
}
.img_header {
border: 1px solid black;
display: inline-block;
width: 600px;
height: 900px;
background-color: #E8E2E2;
position: relative;
}
#head_container {
border: 1px solid orange;
display: inline-block;
width: 1250px;
height: 900px;
}
.img_header img {
width: 230px;
height: 230px;
border-radius: 50%;
display: block;
margin-top: 300px;
margin-left: 280px;
position: relative;
}
.side_header {
border: 1px solid blue;
width: 1250px;
height: 400px;
position: relative;
display: block;
}
.mark {
color: #A1E3D8;
}
what am I missing here?
.head {
border: 1px solid green;
white-space: nowrap;
width:1900px;
height:900px;
}
.img_header {
border: 1px solid black;
display: inline-block;
width: 600px;
height: 900px;
background-color: #E8E2E2;
position: relative;
}
#head_container {
border: 1px solid orange;
display: inline-block;
width: 1250px;
height: 900px;
}
.img_header img {
width: 230px;
height: 230px;
border-radius: 50%;
display: block;
margin-top: 300px;
margin-left: 280px;
position: relative;
}
.side_header {
border: 1px solid blue;
width: 1250px;
height: 400px;
position: relative;
display: block;
}
.mark {
color: #A1E3D8;
}
<head>
<meta charset="UTF-8">
</head>
<body>
<section class="head"><!-- header section -->
<header class="img_header">
<img src="../img/d.jpg">
</header>
<div id="head_container">
<div class="side_header">
<h class="mark">John</h> Snow<br>
Network Solutions Architect
<p>
Mobile<br>
</p>
<p>
Email<br>
</p>
</div>
</div>
</section><!-- header section -->
</body>
When you are making both header and div as inline-block they should be side-by-side ,but as you adding an image in the header the next div is moving . The best way to do this is to use display:flex
check this snippet
.head {
border: 1px solid green;
white-space: nowrap;
width: 1900px;
height: 900px;
display: flex;
}
.img_header {
border: 1px solid black;
width: 600px;
height: 900px;
background-color: #E8E2E2;
}
#head_container {
border: 1px solid orange;
width: 1250px;
height: 900px;
}
.img_header img {
width: 230px;
height: 230px;
border-radius: 50%;
display: block;
margin-top: 300px;
margin-left: 280px;
}
.side_header {
border: 1px solid blue;
width: 1250px;
height: 400px;
position: relative;
}
.mark {
color: #A1E3D8;
}
<head>
<meta charset="UTF-8">
</head>
<body>
<section class="head">
<!-- header section -->
<header class="img_header">
<img src="../img/d.jpg">
</header>
<div id="head_container">
<div class="side_header">
<h class="mark">John</h>Snow
<br>Network Solutions Architect
<p>
Mobile
<br>
</p>
<p>
Email
<br>
</p>
</div>
</div>
</section>
<!-- header section -->
</body>
Solution without flex,is to use display:table and make every content within it as display:table-cell
check this snippet
.head {
border: 1px solid green;
white-space: nowrap;
width: 1900px;
height: 900px;
display: table;
}
.img_header {
border: 1px solid black;
display: table-cell;
width: 600px;
height: 900px;
background-color: #E8E2E2;
}
#head_container {
border: 1px solid orange;
display: table-cell;
width: 1250px;
height: 900px;
vertical-align: top;
}
.img_header img {
width: 230px;
height: 230px;
border-radius: 50%;
margin-top: 300px;
margin-left: 280px;
}
.side_header {
border: 1px solid blue;
width: 1250px;
height: 400px;
}
.mark {
color: #A1E3D8;
}
<head>
<meta charset="UTF-8">
</head>
<body>
<section class="head">
<!-- header section -->
<header class="img_header">
<img src="../img/d.jpg">
</header>
<div id="head_container">
<div class="side_header">
<h class="mark">John</h>Snow
<br>Network Solutions Architect
<p>
Mobile
<br>
</p>
<p>
Email
<br>
</p>
</div>
</div>
</section>
<!-- header section -->
</body>
Hope this helps
Please help me center a div that does not have a predefined width, inside another div. Please see the code below (or on jsbin at http://jsbin.com/ufivif). Thanks.
EDIT: the problem is that I need the caption below the image to be aligned to the left edge of the image. So text-align: center on the container does not work for me.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<style>
.container
{
border: 1px solid red;
padding: 5em;
position: relative;
}
.container img
{
border: 1px solid #333333;
padding: 1em;
}
.container .image
{
border: 1px solid green;
position: absolute;
left: 50%;
}
</style>
</head>
<body>
<div class="container">
<div class="image">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Telefunken_FuBK_test_pattern.svg/500px-Telefunken_FuBK_test_pattern.svg.png"/>
<div class="caption">test image</div>
</div>
</div>
</body>
</html>
A combination of display: inline-block; and text-align:center
http://jsbin.com/ufivif/5
body {
padding: 0;
margin: 0;
}
.container
{
border: 1px solid gold;
padding: 10px;
text-align: center;
}
.container .image
{
border: 1px solid silver;
padding: 10px;
display: inline-block;
text-align: left;
}
.container .image img
{
border: 1px solid #9C6963 ;
padding: 10px;
}
So you need the image centered and not the text here's a way to fix it.
<style>
.container
{
border: 1px solid red;
padding: 5em;
text-align: center;
}
.imageWrapper
{
display: inline;
}
.container .image
{
border: 1px solid green;
display: inline;
position: relative;
}
.caption
{
position: absolute;
left: 0px;
top: 0px;
padding: 1em;
}
</style>
<div class="container">
<div class='imageWrapper'>
<div class="image">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Telefunken_FuBK_test_pattern.svg/500px-Telefunken_FuBK_test_pattern.svg.png">
<div class="caption">Image Text</div>
</div>
</div>
</div>
While this doesn't get the borders to line up properly this does get the image centered and the text to the left of the image.
Try this:
div.image { margin: auto }
If you're only interested in centering on this one div, you can use the text-align: center in the parent:
#arbitrary
{
width: 750px;
border: 1px solid #000000;
text-align: center;
}
<div id="arbitrary">
<div id="image">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Telefunken_FuBK_test_pattern.svg/500px-Telefunken_FuBK_test_pattern.svg.png">
</div>
</div>
If you are trying to center .image div the Try using this CSS:
.container
{
overflow: hidden;
margin: 0 auto
}
.container .image
{
margin: 0 auto
}
I know the obvious solution is to wrap banner and main in a float container, but is there any other way to 'bump' sidebar to the top, given the constraints of the HTML below?
http://html-bin.appspot.com/aghodG1sLWJpbnIMCxIEUGFnZRjJ0wYM
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Floats</title>
<style>
#banner {
width: 70%;
float: left;
padding: 10px;
border: 1px solid blue;
}
#main {
width: 70%;
float: left;
padding: 10px;
border: 1px solid orange;
}
#sidebar {
width: 25%;
float: right;
padding: 10px;
border: 1px solid green;
}
</style>
</head>
<body>
<div id="banner">
Banner
</div>
<div id="main">
Main
</div>
<div id="sidebar">
Sidebar
</div>
</body>
</html>
#sidebar {
border: 1px solid green;
display: inline-block;
.display: inline;
.zoom:1;
padding: 10px;
width: 22%;
}
I need the #infoBar div and the #actualCover div to sit to the right of (next to) the #covers div, but for some reason, the covers div is acting like it's not even there and floats on top of the other divs.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
#chooserContainer
{
border: solid 1px orange;
}
#coverArea
{
border: solid 1px red;
width: 760px;
}
#covers
{
width: 150px;
float: left;
height: 600px;
overflow-y: auto;
overflow-x: hidden;
border: solid 2px #BFDEFF;
padding: 10px;
background-color: #F0F7FF;
margin-right: 30px;
}
#infoBar
{
height: 30px;
border: solid 1px green;
width: 600px;
}
#actualCover
{
width: 794px;
height: 1123px;
background-position: top left;
}
</style>
</head>
<body>
<div id="chooserContainer">
<div id="covers">
</div>
<div id="infoBar">
</div>
<div id="coverArea">
<div id="actualCover">
</div>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
Here you go.
As a good practice, get your layout correct first before you set padding and margins.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
#chooserContainer
{
background: #ccc;
width: 911px;
}
#covers
{
width: 150px;
float: left;
height: 600px;
overflow-y: auto;
overflow-x: hidden;
background-color: #0ff;
}
#infoBar
{
height: 30px;
width: 600px;
float: right;
background: yellow;
}
#coverArea
{
width: 760px;
float: right;
background: #f60;
}
#actualCover
{
width: 794px;
height: 600px;
}
</style>
</head>
<body>
<div id="chooserContainer">
<div id="covers">Coveres
</div>
<div id="infoBar">InfoBar
</div>
<div id="coverArea">CoverArea
<div id="actualCover">ActualCover
</div>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
In this case, it sounds like you want #infoBar and #coverArea to float to the right of #covers instead of #covers floating to the left of the other two.
Try taking the float off of #covers and adding float: right; to #infoBar and #coverArea