This question already has answers here:
How to place two divs next to each other? [duplicate]
(13 answers)
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 5 years ago.
I am quite new to CSS and HTML so I am having trouble with aligning two divs next to each other.
This is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>cards</title>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
</head>
<body>
<div id="card_container">
<div id="card_image_container">
<img src="https://openclipart.org/image/2400px/svg_to_png/177482/ProfilePlaceholderSuit.png"/>
</div>
<div id="card_content_container">
<div id="card_content_title">
<h1>ADVERT</h1>
<h2>EXAMPLE
</div>
<div id="card_content_text">
<p>
<b>Heading</b><br/>
Info
</p>
<p>
<b>Heading 2</b><br/>
Info 2
</p>
</div>
<div id="card_content_actions">
</div>
</div>
</div>
</body>
</html>
and this is my CSS:
*{
padding: 0px;
margin: 0px;
}
#card_container{
margin-left: auto;
margin-right: auto;
width: 36%;
margin-top: 10%;
border: 1px solid grey;
}
#card_container > div{
display: inline-block;
}
#card_image_container{
width: 40%;
background-color: green;
}
#card_image_container img{
vertical-align: bottom;
width: 100%;
height: 100%;
}
#card_content_container{
vertical-align: top;
background-color: red;
width: 59%;
}
And this is the problem I have:
white spaces around div
As you can see - my div has white spaces around it, I know this is due to 1% of width left over but if I change my:
#card_content_container{
vertical-align: top;
background-color: red;
width: 59%;
}
width to 60%, the content_container gets moved to next line.
I need card_content_container to fill the remaining 60% so it's aligned perfectly.
Here is js fiddle:
https://jsfiddle.net/gbcdp2on/
Your issue is the white space between inline-block elements
Set the 59% to 60% and then update your markup to not include a space between the inline-bock elements
<div id="card_image_container">
...
</div><div id="card_content_container">
....
</div>
CSS
#card_content_container{
width: 60%;
}
the reason the space is there when you set 60% width is because your element are inline-block, so the white space counts as a space. There are other ways to write the html if you want it to be easier to read
for example using a comment in between
<div id="card_image_container">
...
</div><!--
--><div id="card_content_container">
....
</div>
There are many ways to achieve what you want but your particular issue is the space between inline-block elements
Inline elements are sensitive to the white space in your code -- so just remove the white space. In your case you need to remove it between your two divs so like </div><div id="card_content_container">
jsFiddle example
Another option would be to float the div on the left:
#card_image_container {
width: 40%;
background-color: green;
float:left;
}
jsFiddle example
You can use flexbox
#card_container {
display: flex;
margin-left: auto;
margin-right: auto;
width: 36%;
margin-top: 10%;
border: 1px solid grey;
}
#card_image_container{
flex: 4;
background-color: green;
}
#card_content_container{
flex: 6;
vertical-align: top;
background-color: red;
}
https://jsfiddle.net/2sq6gu79/
Try wrapping your parent container with display:flex
*{
padding: 0px;
margin: 0px;
}
#card_container{
display:flex;
margin-left: auto;
margin-right: auto;
width: 70%;
margin-top: 10%;
border: 1px solid grey;
}
#card_image_container{
width: 40%;
background-color: green;
}
#card_image_container img{
width: 100%;
height: 100%;
}
#card_content_container{
background-color: red;
width: 60%;
}
<div id="card_container">
<div id="card_image_container">
<img src="https://openclipart.org/image/2400px/svg_to_png/177482/ProfilePlaceholderSuit.png"/>
</div>
<div id="card_content_container">
<div id="card_content_title">
<h1>ADVERT</h1>
<h2>EXAMPLE
</div>
<div id="card_content_text">
<p>
<b>Heading</b><br/>
Info
</p>
<p>
<b>Heading 2</b><br/>
Info 2
</p>
</div>
<div id="card_content_actions">
</div>
</div>
</div>
You can achieve this using flexbox.
*{
padding: 0px;
margin: 0px;
}
#card_container{
display: flex;
margin: auto;
width: 36%;
margin-top: 10%;
border: 1px solid grey;
}
#card_image_container{
width: 40%;
background-color: green;
}
#card_image_container img{
vertical-align: bottom;
width: 100%;
height: 100%;
}
#card_content_container{
vertical-align: top;
background-color: red;
width: 60%;
}
Related
I am trying to create a page, where there is a div in the middle of the page centered horizontally, not vertically, with 3 more divs inside of it which are centered vertically and horizontally with equal spacing. In order to achieve this I thought it would be best to create another div with no background colour, then using margin: auto on it, this div is centered in the main div, but I can't get the 3 other divs to center in that, it's like the margins aren't taking into account the parent element?
I have tried a few methods which say they should center my elements, but they do not work for me, so I thought it would be best if someone can explain to me how this effect can be achieved in CSS.
Here is a screenshot of the current situation (red div will be invisible in final design, coloured to help me): http://i.imgur.com/cHWfVx6.png
HTML Code:
<html>
<head>
<title>Title Placeholder</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"></link>
</head>
<body>
<div id="title"></div>
<div id="introdiv"></div>
<div id="wrapper">
<div id="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</body>
</html>
CSS Code:
html {
background: ##6f7604;
background-image: url("zenbg-1.png"), url("zenbg-2.png");
background-repeat: repeat-x, repeat;
}
#title {
background-color: rgba(83,188,255,0.6);
min-height: 5%;
width: 90%;
margin: auto;
border: 1px solid #ddd;
}
#introdiv {
background-color: rgba(255,207,76,0.9);
min-height: 15%;
width: 70%;
margin: auto;
margin-top: 2.5%;
border: 1px solid #ddd;
}
#wrapper {
background-color: rgba(83,188,255,0.6);
min-height: 65%;
width: 80%;
margin: auto;
margin-top: 2.5%;
border: 1px solid #ddd;
}
#container {
min-height: 10%;
width: 50%;
background-color: red;
margin: auto;
margin-top: 6.5%;
}
.box {
background-color: rgba(255,207,76,0.9);
min-height: 40%;
width: 20%;
margin-left: 5%;
margin-top: 5%;
border: 1px solid #ddd;
display: inline-block;
}
Thanks for your help, if you need any more info, ask.
You can use absolute position and transform to align element middle and center. Example:
.main {
width: 100%;
height: 256px;
padding: 20px;
background: #000;
}
.center-h {
width: 80%;
height: 200px;
margin: 0 auto;
position: relative;
background: #555;
}
.center-vh {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #999;
padding: 10px;
}
.box {
display: inline-block;
width: 64px;
height: 64px;
margin-right: 10px;
background: #ccc;
float: left;
}
.box:last-child {
margin-right: 0;
}
<div class="main">
<div class="center-h">
<div class="center-vh">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
Use vertical-align: middle like this
.box {
background-color: rgba(255,207,76,0.9);
min-height: 40%;
width: 20%;
margin-left: 5%;
vertical-align: middle;
border: 1px solid #ddd;
display: inline-block;
}
Right now Im trying to put an image on the top of a div. The divs are in horizontal, and I don´t know why, but when I put the image its position affects all external divs... I mean, the image should only affect the div in which I put it.
I know this can be a little bit difficult to undestand, I took a capture of my divs: Capture. As you can see, the height of my image affects the external divs.
Here is the HTML code:
<div class="hoteles">
<div class="head-hoteles">Los mejores hoteles</div>
<div class="hotel"><img src="images/hotels/hotel-bellevue.jpg" alt="Hotel Bellevue"></div>
<div class="hotel">Hotel1</div>
<div class="hotel">Hotel1</div>
<div class="hotel">Hotel1</div>
<div class="hotel">Hotel1</div>
</div>
And the CSS:
.hoteles{
background-color: pink;
height: 100%;
width: 65%;
float: left;
padding-left: 2%;
}
.head-hoteles{
width: 100%;
height: 100px;
background-color: yellow;
padding: 5%;
font-size: 1.5em;
}
.hotel{
height: 12.5em;
min-width: 23%;
display: inline-block;
background-color: brown;
margin-bottom: 2%;
}
.hotel img{
width: 100px;
}
Other question is... when I put "width 100%" its does not do it, I just can resize the image with pixels... Thanks !
You need to float the divs, currently your divs are positioned as inline-block which is causing disorder. Additionally you can use vertical-align: top to order the inline-block.
Working example:
JSFiddle
.hoteles {
background-color: pink;
height: 100%;
width: 65%;
float: left;
padding-left: 2%;
}
.head-hoteles {
width: 100%;
height: 100px;
background-color: yellow;
padding: 5%;
font-size: 1.5em;
}
.hotel {
height: 12.5em;
min-width: 23%;
background-color: brown;
float: left;
margin:2% 5px 2% 0;
}
.hotel img {
width: 100px;
float:left;
}
<div class="hoteles">
<div class="head-hoteles">Los mejores hoteles</div>
<div class="hotel">
<img src="images/hotels/hotel-bellevue.jpg" alt="Hotel Bellevue" />
</div>
<div class="hotel">Hotel1</div>
<div class="hotel">Hotel1</div>
<div class="hotel">Hotel1</div>
<div class="hotel">Hotel1</div>
</div>
As for your second question, you need to have a width for the parent of img. Currently it uses min-width, change it to width and give your img the width of 100% and it will expand to the percentage of the parent. Like the following:
.hotel {
width: 23%;
}
.hotel img {
width: 100%;
}
Try adding the following CSS rule:
.hotel { vertical-align: top; }
You are seeing the result of inline elements being positioned along the baseline.
This question already has answers here:
Why doesn't the height of a container element increase if it contains floated elements?
(7 answers)
Closed 8 years ago.
In the following scenario I do not understand why the height of the elements wrapper and content are not set correctly even though they are set to height: auto, meaning that the 2 divs with the class wrap are not displayed inside the wrapper and content divs.
I recreated the problem in this JSfiddle:
http://jsfiddle.net/202oy3k8/
The As you can see the two orange divs are not displayed inside the wrapper divs, even though the wrapper height is set to auto. What is causing this problem and how can I fix it?
HTML CODE:
<div id="wrapper">
<div id="content">
<div id="top">
</div>
<div class="dash"></div>
<p id="header">Header</p>
<div class="wrap">
</div>
<div class="wrap">
</div>
</div>
</div
CSS CODE:
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#wrapper {
background-color: black;
margin-top: 2%;
width: 100%;
height: auto;
}
#content {
background-color: green;
width: 1224px;
height: auto;
margin: auto;
text-align: center;
}
#top {
background-color: pink;
height: 400px;
width: 60%;
margin: auto;
}
.dash {
width: 80%;
margin: auto;
margin-bottom: 1%;
height: 2px;
background-color: black;
}
p#header {
margin: 0;
text-align: center;
}
.wrap {
background-color: orange;
margin: 1%;
float:left;
width: 48%;
height: 400px;
}
You have to add a clear property to clear left float you have applied to .wrap divs.
What are float and clear for?
If you look in a typical magazine you’ll see images illustrating the
articles, with the text flowing around them. The float property in CSS
was created to allow this style of layout on web pages. Floating an
image—or any other element for that matter—pushes it to one side and
lets the text flow on the other side. Clearing a floated element means
pushing it down, if necessary, to prevent it from appearing next to
the float. Although floating was intended for use with any elements,
designers most commmonly use it to achieve multi-column layouts
without having to abuse table markup.
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#wrapper {
background-color: black;
margin-top: 2%;
width: 100%;
height: auto;
}
#content {
background-color: green;
width: 400px;
height: auto;
margin: auto;
text-align: center;
}
#top {
background-color: pink;
height: 400px;
width: 60%;
margin: auto;
}
.dash {
width: 80%;
margin: auto;
margin-bottom: 1%;
height: 2px;
background-color: black;
}
p#header {
margin: 0;
text-align: center;
}
.wrap {
background-color: orange;
margin: 1%;
float: left;
width: 48%;
height: 400px;
}
.clear {
clear: left;
}
<div id="wrapper">
<div id="content">
<div id="top"></div>
<div class="dash"></div>
<p id="header">Header</p>
<div class="wrap"></div>
<div class="wrap"></div>
<div class="clear"></div>
</div>
</div
Reference: w3.org - Floats and clearing - CSS-Tricks - What is "Float"?
I Know there are several questions about this topic, however I think they depend a bit on another CSS properties given before.
I have a nested <div id="tituloParametros>" and I need its text/contain to be centred on vertical and horizontal position.
This is my markup:
<div id="outer">
<div id="parametros">
<div id="tituloParametros">Ingresa los puntos conocidos x,f(x)</div>
</div>
<div id="resultados">
<div id="graficos">
<div id="bars"></div>
<div id="fx"></div>
<div id="pinchetabla">Tabla inútil</div>
</div>
<div id="loquerealmenteimporta"></div>
</div>
</div>
And this is the applied CSS:
#outer{
padding-left: 15px;
padding-top: 15px;
width: 1350px;
height: 640px;
}
#parametros {
float:left;
width: 20%;
height: 100%;
}
#tituloParametros {
height: 9%;
width: 100%;
background-color: red;
text-align:center;
vertical-align:middle
}
#resultados {
float:right;
width: 80%;
height: 100%;
}
#graficos {
height: 75%;
width: 100%;
}
#bars {
float: left;
height: 100%;
width: 30%;
}
#fx {
float: left;
height: 100%;
width: 30%;
}
#pinchetabla {
float: left;
height: 100%;
width: 40%;
}
#loquerealmenteimporta {
height: 25%;
width: 100%;
}
I thought that:
text-align:center;
vertical-align:middle
both will make it but it didn't. Adding display: table-cell; doesn't solve it neither, it actually crops the background to the text limits.
This is how it looks like
You're right - the table/table-cell approach doesn't work here.
As an alternative, you could resort to the absolute positioning method. An element will be vertically centered when the top value is 50% subtracted by half the element's height. In this instance, it shouldn't be a problem because the height is already set with the % unit. 100% - 50% - 9%*.5 = 45.5% If this weren't the case, you could use calc() or negative margins to subtract the px unit from the % unit. In this case, it's worth noting that the child element is absolutely positioned relative to the parent element.
Updated CSS -- UPDATED EXAMPLE HERE
#parametros {
float:left;
width: 20%;
height: 100%;
outline : 1px solid black;
position:relative;
}
#tituloParametros {
background-color: red;
width: 100%;
height: 9%;
text-align:center;
position:absolute;
top:45.5%
}
The element #tituloParametros is now centered within the parent element. If you want to center the text within it, you could wrap the text with a span element and then use the table/table-cell vertical centering approach:
UPDATED EXAMPLE HERE
#tituloParametros {
/* other styling.. */
display:table;
}
#tituloParametros > span {
display:table-cell;
vertical-align:middle;
}
Here is my fix for this!::::
HTML:
<div id="parametros">
<div id="tituloParametros"><p>Ingresa los puntos conocidos x,f(x)</p></div>
</div>
CSS:
#tituloParametros {
height: 70px;
width: 100%;
background-color: red;
text-align:center;
vertical-align:middle
}
#tituloParametros p{
line-height: 70px;
}
<html>
<head>
<title>Universal vertical center with CSS</title>
<style>
.greenBorder {border: 1px solid green;} /* just borders to see it */
</style>
</head>
<body>
<div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div class="greenBorder" style=" #position: relative; #top: -50%">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>
</body>
</html>
Here is the demo
http://www.jakpsatweb.cz/css/priklady/vertical-align-final-solution-en.html
I've been search for more than a day a way to vertical align my fluid designed header so without knowing font-size nor spesific pixels my 3 divs will be the same height and the content inside them in the same line.
Here is an fiddle example of what I have now so you might understand what i need better.
And this is the code:
HTML:
<div id="container">
<div id="header">
<div id="menu">
<a href="#">
<img src='http://s16.postimg.org/uwgkp15r5/icon.png' border='0' alt="icon" />
</a>
</div>
<div id="title">
My site title
</div>
<div id="my_button">
<button id="button">My button</button>
</div>
<div style="clear: both;"></div>
</div>
<div id="content"></div>
</div>
CSS:
html,body {
height: 100%;
font-size: 2vmin;
}
#container {
height: 100%;
min-height: 100%;
}
#header {
height: 20%;
padding: 2vmin 0 2vmin 0;
box-sizing: border-box;
background: #000000;
width: 100%;
}
#menu{
background: #5f5f5f;
float: left;
width: 20%;
text-align: center;
}
#title {
background: #aaaaaa;
height: 100%;
float: left;
font-size: 3vmin;
width: 60%;
text-align: center;
}
div#my_button {
background: #cccccc;
float: right;
width: 20%;
}
button#button {
color: #aaaaaa;
border: none;
}
#content {
height: 70%;
width: 100%;
background: #eeeeee;
}
You can use :after pseudo element for solving your problem.
add this after #header styles in your CSS
#header:after{
height: 100%;
width: 1px;
font-size: 0px;
display: inline-block;
}
Then remove floats from #menu, #title and #my_buttun div's and apply
display: inline-block;
vertical-align: middle;
The inline-block will create small gaps between these div, but if you're not apply background colors to them , then it is ok.
Last: make #my_button width: 19%;
Look here: http://jsfiddle.net/D22Ln/5/
If you mean the three horizontal divs, setting height: 100%; for all of them will do the trick. From there you just modify the size of their parent element (currently at 20%) and they will adapt automatically.
http://jsfiddle.net/D22Ln/2/
If I have understood you correctly this is maybe what you are looking for, I just copied that I have done earlier. But test it out: http://jsfiddle.net/6aE72/1/
By using wrapper and a helper you will have the left and right div same size as middle and helper helps with vertical alignment
#wrapper { display: table; width: 100%; table-layout: fixed; position: absolute; top: 0;}
.content { display: table-cell; }
This FIDDLE might help you. I've used bootstrap framework. Re-size the RESULT grid.