This is my mockup:
I want to set divs as in the picture. DIV 1 and DIV 2 contain dynamically generated content and the width is different every time.
Div 1 is floated to the left side and Div 2 is floated to the right side.
My question is: how to position Div 3 to fit it between div 1 and 3?
My code is:
HTML
<div class="dia">
<div class="left">sassssss</div>
<div class="center">dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</div>
<div class="right">asdasdfgdsgdf</div>
</div>
CSS
.dia {
background: #282828;
padding: 10px;
height: 106px;
border-radius: 5px;
}
.dia .center {
margin-left: 20px;
}
.dia .left, .dia .right {
overflow: hidden;
}
.dia .left {
float: left;
margin-right: 10px;
}
.dia .right {
float: right;
margin-left: 10px;
background: rgb(214,214,214);
}
and I want to fit center div which now is too wide and moves right div lower than I want.
SOLUTION:
HTML
<div class="dia">
<div class="left">sassssss</div>
<div class="center">ddddddddddddddddddddd dddddddddddddddddddddddddd ddddddddddddddddddddddddddddddddd dddddddddddd</div>
<div class="right">asdasdfgdsgdf</div>
</div>
CSS
.dia {
background: #282828;
padding: 10px;
height: 106px;
border-radius: 5px;
width: inherit;
}
.dia .left, .dia .right {
overflow: hidden;
height: 106px;
}
.dia .left {
float: left;
margin-right: 10px;
}
.dia .right {
float: right;
margin-left: 10px;
}
.dia .center {
height: inherit;
float: left;
}
JQuery
$('.dia .left a:not(:first-child)').css('width',$('.dia a').outerWidth(true)+'px');
$('.dia .center').css('width',$('.dia').width()-$('.dia .left').outerWidth(true)-$('.dia .right').outerWidth(true)+'px');
And Fiddle
Simply float the central div.
For your purpose you case use:
.dia{
float:left//Float container in order to contain nested elements.
}
.dia div{
float:left;
}
Here's a fiddle you can fiddle with
Well I did manage to do this in this fiddle, but it feels a little like a workaround, since you have to be careful with center content. Then again, it works, so you can use it as a placeholder or something until you or someone else comes up with better solution.
CSS:
.dia {
background: #282828;
padding: 10px;
height: 106px;
border-radius: 5px;
}
.dia .center {
overflow:auto;
height: 100px;
background-color: #aaa;
margin-left: 20px;
}
.dia .left {
float: left;
height: 100px;
background-color: #ddd;
}
.dia .right {
position:absolute;
/*.dia padding + border*/
right: 15px;
/*.dia padding + border + (.dia height - this height)/2*/
top: 18px;
height: 100px;
background: rgb(214,214,214);
}
try this.
<!DOCTYPE html>
<html>
<head>
<style>
#main
{
width: 100%;
height: 300px;
border: 1px solid black;
display: -webkit-flex; /* Safari */
display: flex;
}
#panelLeft, #panelRight
{
-webkit-flex: 1; /* Safari 6.1+ */
-ms-flex: 1; /* IE 10 */
flex: 1;
}
#panelCenter
{
-webkit-flex: 3; /* Safari 6.1+ */
-ms-flex: 3; /* IE 10 */
flex: 3;
}
</style>
</head>
<body>
<div id="main">
<div id="panelLeft" style="background-color:coral;">RED</div>
<div id="panelCenter" style="background-color:lightblue;">BLUE</div>
<div id="panelRight" style="background-color:lightgreen;">Green div with more content.</div>
</div>
</body>
</html>
How about using a table instead?
<table class="dia">
<tbody>
<tr>
<td class="left">sassssss</td>
<td class="center">dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</td>
<td class="right">asdasdfgdsgdf</td>
</tr>
</tbody>
</table>
Then the CSS would be:
.dia {
background: #282828;
padding: 10px;
height: 106px;
border-radius: 5px;
width: 100%;
table-layout: fixed;
}
.dia .center {
margin-left: 20px;
word-wrap: break-word;
}
.dia .left, .dia .right {
overflow: hidden;
}
.dia .left {
float: left;
margin-right: 10px;
}
.dia .right {
float: right;
margin-left: 10px;
background: rgb(214,214,214);
}
http://jsfiddle.net/YvnnW/13/
Related
.topnavigatiebar {
width: 1500px;
height: 100px;
background-color: #fafafa;
position: fixed;
top: 0;
overflow: hidden;
z-index: 9;
white-space: nowrap;
}
.topnavigatiebar img {
float: left;
}
.topnavigatiebar #nav {
width: 80%;
height: 50%;
margin-top: 25px;
margin-left: 20px;
float: left;
display: block;
text-decoration: none;
text-align: center;
}
.topnavigatiebar #nav #sector {
width: auto;
height: 75%;
float: left;
margin: 0 15px 0 15px;
padding: 5px 10px 5px 10px;
border-radius: 6px;
}
.topnavigatiebar #nav #sector:hover {
background-color: lightgrey;
transition: 0.25s;
}
.topnavigatiebar #nav .active {
background-color: #b7a483;
}
.topnavigatiebar #nav:visited {
color: black;
}
.topnavigatiebar #nav #sector a {
font-size: 20px;
vertical-align: center;
line-height: 40px;
text-decoration: none;
color: inherit;
}
#logo {
display: inline-block;
margin-top: auto;
height: 100%;
vertical-align: middle;
}
#logo img {
background: #3A6F9A;
vertical-align: middle;
max-height: 100px;
max-width: 100px;
border-radius: 45px;
}
.right {
float: right;
}
<div class="topnavigatiebar">
<img src="https://imgur.com/trhdmMX">
<div id="nav">
<div id="sector">Home</div>
<div id="sector" class="active">KlantenInformatie</div>
<div id="sector">Artikelen</div>
<div id="sector">Instellingen</div>
<div class="right">
<div id="sector">Afmelden</div>
</div>
</div>
<div id="logo"><img src="../Includes/Pictures/ProfielLogo.png"></div>
</div>
So i couldn't find a specific answer to my question, but something in my html is going wrong.
i try to vertical align a image to the center of a navigation bar. the image is for profile pictures, so you can see who is logged in (the login config isn't there yet, but that is for later).
Can anyone look at my code and tell me what i am doing wrong?
It just might be very simple and me stupid enough to forget, but i just can't figure out?
i already tried these methods, but they didn't solve my problem:
How to vertically align an image inside a div?
facebook photo/ image vertical align?
vertical-align image in div
EDIT: here are 2 links for the pictures:
https://imgur.com/trhdmMX
Try adding margin-top: 20% in the #logo img in CSS.
You can also do the same by adding display: block; margin-top: 25%; in #logo img in CSS as well.
This is Html page and I can't make the image .loader centered and at the bottom of .please-wait. How to make it centered and at the bottom?
HTML File
<div id="container">
<main id="main" class="welcome">
</main>
<aside id="aside-right">
<img alt="Welcome" src="../images/panel.png" />
<div class="please-wait">
<h3>Please Wait</h3>
<img class="loader" src="../images/loading.gif" alt="Loading">
</div>
</aside>
</div>
</body>
CSS File
#container
{
/* border: 2px solid black; */
width: 100.6%;
margin: 5px;
white-space: nowrap;
overflow: hidden;
position:relative;
}
#main
{
Position:absolute;
/* border: 2px solid blue; */
float: left;
margin: 3px;
width: 65%;
display: block;
top: 25%;
}
#main.welcome
{
test-align: center;
}
#main.welcome h2
{
width: 58%;
margin: 0 auto;
text-align: center;
word-break: normal;
word-wrap: break-word;
white-space: pre-line;
/* border: 2px solid red; */
}
#aside-right
{
position:relative;
max-height:200px;
height:200px;
border: 2px solid green;
float: right;
width: 27%;
}
#aside-right img
{
position:relative;
width:100%;
float:right;
}
.please-wait
{
position:absolute;
border:2px solid red;
height: 100%;
width: 100%;
}
.please-wait h3
{
position: relative;
/* border:2px solid blue; */
margin: 15px;
top:30px;
text-align: center;
}
.please-wait img
{
position: relative;
margin: 15px;
text-align: center;
max-width: 20%;
border:2px solid blue;
}
Can you please help me to center it and make it at the bottom of .please-wait
JSFiddle
Can you please help me to center it and make it at the bottom of .please-wait
CSS3 Flex can be good idea for manipulate image and flexible layout....
html,
body {
height: 100%;
margin: 0;
}
.main {
height: 100%;
border: 1px dotted blue;
position: relative;
min-height: 500px;
}
.container {
height: 100%;
padding: 0 20px;
}
.image {
display: flex;
justify-content: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.image img {
align-self: flex-end;
}
<div class="main">
<div class="container">
<div class="image">
<img src="http://unsplash.it/300/220?random">
</div>
</div>
</div>
Use this fiddle
Added another class for panel image and this...
.please-wait img {
position: relative;
margin: 15px;
text-align: center;
padding: 0 50px;
margin-top: 110px;
padding-bottom: 0;
border: 2px solid blue;
}
I have a large div at 100% width, with a smaller div inside at 1086px;
I am trying to get the small div to be centered horizontally and it's content vertically centered.
Where am I going wrong?
<html>
<head>
<title>test</title>
<style>
body {
margin:0; padding:0;
}
.wrapper {
width:100%;
height:446px;
background:red;
margin:0;
padding:0;
}
.inner {
width:1086px;
height: 446px;
background: yellow;
margin: 0px auto;
vertical-align:middle;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="inner">asd</div>
</div>
</body>
</html>
vertical-centered is just working for table-cells. If you want to horizontally align, you should use display:table-cell;
Try this code;
http://codepen.io/ogzhncrt/pen/rVRONG
body {
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
height: 446px;
background: red;
margin: 0;
padding: 0;
}
.inner {
display: table;
width: 1086px;
height: 446px;
background: yellow;
margin: 0px auto;
}
.center {
vertical-align: middle;
display: table-cell;
}
.inner {
margin: auto;
width: 1086px;
height: 100%;
background: yellow;
/* margin: 0px auto;
vertical-align:middle; */
/* If you can use flexbox
display: flex;
justify-content: center;
align-items: center;
*/
}
/* If you can't */
.inner > p {
margin: 0;
height: 50%;
transform: translateY(100%);
text-align: center;
}
You can use flex box like this:
body {
margin:0;
padding:0;
}
.wrapper {
width:100%;
height:446px;
background:red;
margin:0;
padding:0;
}
.inner {
width:1086px;
height: 446px;
background: yellow;
margin: 0px auto;
vertical-align:middle;
display: flex; /*added*/
align-items: center; /*added*/
}
<div class="wrapper">
<div class="inner">
<div>here the content</div>
</div>
</div>
See the snippet in Full Page.
Check this out for full information
I'm trying to figure out how to align 2 floating divs vertically. Each of the divs has a flexible height.
Here is what i have so far: http://jsfiddle.net/VLRpc/1/
<div class="section">
<div class="container">
<div class="wrap">
<div class="column left">
<h1>Software</h1>
<p>I use many software applications to achieve the best results.</p>
</div>
<div class="column right"></div>
</div><!-- end wrap -->
</div><!-- end container -->
</div><!-- end section -->
.container {
width: 100%;
height: 100%;
display: table;
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
}
.wrap {
vertical-align: middle;
display: table-cell;
padding: 0;
margin: 0;
border: 1px solid red;
}
/* Columns */
.column {
width: 45%;
height: auto;
float:left;
text-align: center;
border: 1px solid black;
}
.right {
margin-left:0;
height: 250px
}
.left {
margin-left:5%;
}
However the div on the left gets pushed to the top of the larger div which is on the right. I need both of these divs to be vertically centered.
Any ideas?
Here's how you could make it flexible (no fixed heights, just keep those .column containers vertically centered regardless of their content): set .column to display:inline-block and to vertical-align: middle inside your table-cell .wrap div.
.column {
display: inline-block;
width: 45%;
height: auto;
text-align: center;
border: 1px solid black;
vertical-align: middle;
}
http://jsfiddle.net/VLRpc/2/
Here you go, just change the margin-top value in the left column, and all should be good. If you want more content in that column, add some padding-top too. Here is the changed css for it:
.container {
width: 100%;
height: 100%;
display: table;
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
}
.wrap {
vertical-align: middle;
display: table-cell;
padding: 0;
margin: 0;
border: 1px solid red;
}
/* Columns */
.column {
width: 45%;
height: auto;
text-align: center;
border: 1px solid black;
margin:0;
}
.right {
margin-left:0;
height: 250px;
float: right;
margin-right: 1em;
}
.left {
float: left;
margin-top: 50px;
margin-left: 1.4em;
}
I need to have these divs side by side for a menu bar but up until now it keeps stacking up on each other. I have tried doing margin-right/left/top/bottom, padding, etc... but can't get it to work, any suggestions?
<div id="Menu" >
<div id="M_1"><a id="M_1_L" href="P4.html">Given</a></div>
<div id="M_4"><a id="M_4_L" href="P2.html">Received</a></div>
<div id="M_3"><a id="M_3_L" href="P3.html">Bucket List</a></div>
<div id="M_2"><a id="M_2_L" href="P1.html">Traditions</a></div>
</div>
The CSS is:
#Menu
{
width: 50%; height: 40px; background-color: blue; margin-left: auto;
margin-right: auto; margin-top: 20px; border-radius: 20px;
}
#M_1
{
text-align: center; width: 20%; background-color: black;
}
#M_2
{
text-align: center; width: 20%; background-color: black;
}
#M_3
{
text-align: center; width: 20%; background-color: black;
}
#M_4
{
text-align: center; width: 20%; background-color: black;
}
add these two for each one
#M_1
{
display: inline-block;
float: left;
}
if that doesn't fit them all in, try changing 1 or 2 or all of them to 19% width instead
You need to float: left them or set them to display: inline-block.
You can tidy your CSS by merging selectors.
#menu{
display:table;width: 50%; height: 40px; background-color: blue;
margin:20px auto; border-radius: 20px;
}
#menu > div{
text-align: center; background-color: black;display:table-cell
}
This best thing to do would be:
<ul>
<li>given</li><li>
received</li>
</ul>
Ul {
Width:50%;
Height:40px;
Background: blue;
Margin: 0 auto;
}
Ul li {
Display:inline-block;
Width:20%;
Background:#000;
Text-align: center;
}
Having the closing tag and open tag next to each other stops inline-block from leaving a gap between the elements.