I want the div in the flexbox container to appear in the next line.
I have a drawer div and within that have details div. within details div I want the SVG and span elements to be in one line. If the span element has text more than one line then should fit in next line and the div element after span element should always be below the span element and centered in the list element(no matter span element has text one or more than one line).
Something like below.
Below is the code,
.drawer {
display: flex;
flex-direction: column;
position: absolute;
width: 392px;
top: 55px;
right: 8px;
min-height: 40%;
max-height: 450px;
margin-left: 16px;
&::after {
content: " ";
position: absolute;
bottom: 100%;
left: 83%;
margin-left: -5px;
border-width: 14px;
border-style: solid;
}
}
.item {
display: flex;
flex-direction: row;
font-size: 12px;
padding: 8px;
min-height: 49px;
li {
list-style: none;
}
.details {
display: flex;
flex-grow: 1;
color: #333;
margin-right: 4px;
}
}
<div class="drawer">
<ul>
<li class="item">
<div class="details">
<svg/>
<span>sometext</span>
<div>
<div/><img/>
</div>
</div>
</li>
</ul>
</div>
Could someone help me solve this? Thanks.
Your structure contains too many styles, which I was not sure after looking at the requirement of yours (png attached).
I have added a simple structure suiting your requirement, please see if it makes sense.
In case you want something please revert
.drawer {
display: flex;
flex-direction: column;
position: absolute;
width: 392px;
top: 55px;
left: 8px;
min-height: 40%;
max-height: 450px;
margin-left: 16px;
}
svg {
border: solid 1px;
}
.drawer::after {
content: " ";
position: absolute;
bottom: 100%;
left: 83%;
margin-left: -5px;
border-width: 14px;
border-style: solid;
}
.item {
display: flex;
flex-direction: row;
font-size: 12px;
padding: 8px;
min-height: 49px;
}
.item {
list-style: none;
border-bottom: solid 1px;
}
.item .details {
color: #333;
margin-right: 4px;
}
.media {
display: flex;
align-items: flex-start;
}
.media-body {
flex: 1;
}
<body>
<div class="drawer">
<ul>
<li class="item">
<div class="media">
<svg class="bd-placeholder-img mr-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">64x64</text></svg>
<div class="media-body" style="margin-left:20px;">
<p> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis
in faucibus. </p>
<p style="text-align:center;"> Center align Text </p>
</div>
</div>
</li>
<li class="item">
<div class="media">
<svg class="bd-placeholder-img mr-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">64x64</text></svg>
<div class="media-body" style="margin-left:20px;">
<p> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis
in faucibus. </p>
<p style="text-align:center;"> Center align Text </p>
</div>
</div>
</li>
<li class="item">
<div class="media">
<svg class="bd-placeholder-img mr-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">64x64</text></svg>
<div class="media-body" style="margin-left:20px;">
<p> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis
in faucibus. </p>
<p style="text-align:center;"> Center align Text </p>
</div>
</div>
</li>
</ul>
</div>
</body>
The text below will be centred more content on top
.drawer {
display: flex;
flex-direction: row;
}
.drawer_icon {
width: 60px;
height: 60px;
background: palevioletred;
margin-right: 16px;
}
p {
text-align: center;
}
<div class="drawer">
<div class="drawer_icon"></div>
<div>
<span>Some Text</span>
<p>Centered text</p>
</div>
</div>
Related
So I'm trying to right align the itens inside of the ul. I want the item to touch the right border.
Did some research and tried to use "justify-items: end;" inside of the grid (container). Didn't work.
Tried to use "justify-self: end;" in the right element, also didn't work.
Created a flexbox, inside of the <ul> , and tried "align-items: flex-end" , also didn't work.
I don't know what to do. Probably can't align because there is a space between the item and the right margin (which I've put a green background for everyone to see), but I dont know where this space come from, also don't know how to remove it. Tried to do margin:0 and padding:0, but it didn't work.
* {
box-sizing: border-box;
}
body,html{
height:100%;
margin:0;
}
.container{
display:grid;
grid-template-columns: 35% 2fr;
grid-template-areas: "leftEl rightEl";
justify-content: center;
align-content: center;
padding: 1.5rem;
height: 100%;
}
.right{
grid-column: rightEl;
justify-self: end; /*not working*/
border: 3px solid black;
}
ul{
list-style-type: none;
background-color: aquamarine;
display: flex;
flex-direction: column;
align-items: flex-end; /* not working */
padding: 0;
}
.li-el{
display: flex;
justify-content: space-between;
padding: 1.5rem;
cursor: pointer;
border-bottom: 4px solid rgba(0,0,0,0.2);
color: white;
transform: rotateY(-22deg) rotateX(7deg);
}
.li-el p{
margin: 1.5rem;
}
.li1{
background-color: rgba(37, 187, 112);
}
.li2{
background-color: rgb(154, 169, 168);
}
.li3{
background-color: rgb(89, 188, 224);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style2.css">
<title>Document</title>
</head>
<body>
<div class="art1"></div>
<div class="art2"></div>
<div class="container">
<div class="right">
<ul>
<li class="li-el li1">
<p>Pellentesque pretium ullamcorper ullamcorper. Aenean quis accumsan eros. Fusce pretium risus a risus pretium ornare. </p>
</li>
<li class="li-el li2">
<p>Pellentesque pretium ullamcorper ullamcorper. Aenean quis accumsan eros. Fusce pretium risus a risus pretium ornare. </p>
</li>
<li class="li-el li3">
<p>Pellentesque pretium ullamcorper ullamcorper. Aenean quis accumsan eros. Fusce pretium risus a risus pretium ornare. </p>
</li>
</ul>
</div>
</div>
</body>
</html>
Because you have transformed the li elements to skew their boxes. I added margin-right: -6px on them and it bumped them over:
* {
box-sizing: border-box;
}
body,
html {
height: 100%;
margin: 0;
}
.container {
display: grid;
grid-template-columns: 35% 2fr;
grid-template-areas: "leftEl rightEl";
justify-content: center;
align-content: center;
padding: 1.5rem;
height: 100%;
}
.right {
grid-column: rightEl;
justify-self: end;
/*not working*/
border: 3px solid black;
}
ul {
list-style-type: none;
background-color: aquamarine;
display: flex;
flex-direction: column;
align-items: flex-end;
/* not working */
padding: 0;
}
.li-el {
display: flex;
justify-content: space-between;
padding: 1.5rem;
cursor: pointer;
border-bottom: 4px solid rgba(0, 0, 0, 0.2);
color: white;
transform: rotateY(-22deg) rotateX(7deg);
margin-right: -6px;
}
.li-el p {
margin: 1.5rem;
}
.li1 {
background-color: rgba(37, 187, 112);
}
.li2 {
background-color: rgb(154, 169, 168);
}
.li3 {
background-color: rgb(89, 188, 224);
}
<div class="container">
<div class="right">
<ul>
<li class="li-el li1">
<p>Pellentesque pretium ullamcorper ullamcorper. Aenean quis accumsan eros. Fusce pretium risus a risus pretium ornare. </p>
</li>
<li class="li-el li2">
<p>Pellentesque pretium ullamcorper ullamcorper. Aenean quis accumsan eros. Fusce pretium risus a risus pretium ornare. </p>
</li>
<li class="li-el li3">
<p>Pellentesque pretium ullamcorper ullamcorper. Aenean quis accumsan eros. Fusce pretium risus a risus pretium ornare. </p>
</li>
</ul>
</div>
</div>
I’m using Flexbox to align the height of two adjacent columns, which works. I now need to vertically center the inner content within the flex box columns without using fixed heights. Additionally this all needs to work within Bootstrap 3. Please see code below:
.row-flex,
.row-flex > div[class*='col-'] {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex: 1 1 auto;
}
.row-flex-wrap {
-webkit-flex-flow: row wrap;
align-content: flex-start;
flex: 0;
}
.row-flex > div[class*='col-'],
.container-flex > div[class*='col-'] {
margin: -.2px;
/* hack adjust for wrapping */
}
.container-flex > div[class*='col-'] div,
.row-flex > div[class*='col-'] div {
width: 100%;
}
.flex-col {
display: flex;
display: -webkit-flex;
flex: 1 100%;
flex-flow: column nowrap;
}
.flex-grow {
display: flex;
-webkit-flex: 2;
flex: 2;
}
.content {
border: 1px solid black;
padding: 20px;
}
.content-inner {
border: black solid 1px;
padding: 20px;
}
.img {
width: 100px;
height: auto;
display: block;
margin: 0 auto;
}
figcaption {
text-align: center;
}
[class*="col-"] {
padding: 0;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row row-flex row-flex-wrap">
<div class="col-xs-7">
<div class="content">
<div class="content-inner">
<figure>
<img class="img" src="http://i80.photobucket.com/albums/j182/swiftian/headersnstuff/sidebar_zaius.jpg" alt="Macaque in the trees">
<figcaption>Dr. Zaius</figcaption>
</figure>
</div>
</div>
</div>
<div class="col-xs-5">
<div class="content">
<div class="content-inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.
</div>
</div>
</div>
</div>
<!--/row-->
</div>
<!--/container-->
<hr>
JS FIDDLE
https://jsfiddle.net/baydbzbn/1/
Appreciate any help.
Add this to your .content class CSS definition
display: flex;
align-items: center;
I'm working on a one page site, and I modified the html to have six sections. It works perfectly on all browsers except for internet explorer. It kicks me to in between the second last and last two sections (on the modified version with one additional section) I've tried taking off the js query, but that did nothing, which confirmed my suspicion that it was something to do with css. I'm very new at web design and I'm not sure what to adjust please take a look at the code below (this is the version without the additional section):
Html:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="metro, free website template, beautiful grid, image grid menu, colorful theme" />
<meta name="description" content="Metro is a free website template by templatemo.com and it features jQuery horizontal scrolling among pages." />
<link href="templatemo_style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="js/jquery.localscroll-min.js"></script>
<script type="text/javascript" src="js/init.js"></script>
<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />
<script type="text/JavaScript" src="js/slimbox2.js"></script>
</head>
<body>
<div id="templatemo_header">
<div id="site_title"><h1>Metro</h1></div>
</div>
<div id="templatemo_main">
<div id="content">
<div id="home" class="section">
<div id="home_about" class="box">
<h2>Welcome</h2>
<p>Metro is a free website template for everyone from templatemo.com and it can be used for any purpose. Validate <strong>XHTML</strong> & <strong>CSS</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus felis leo, feugiat sed porttitor sagittis, facilisis sit amet lectus. Aenean elementum tellus auctor dolor auctor luctus. Vivamus eu orci purus, ut vulputate nisl.</p>
<p>Praesent imperdiet mauris et lorem malesuada consequat. Proin nisl metus, faucibus vitae malesuada non, interdum sed felis. Sed ut turpis feugiat lorem faucibus dignissim. Donec magna tellus, feugiat vel fermentum eget, fringilla at metus.</p>
</div>
<div id="home_gallery" class="box no_mr">
<img src="images/gallery/01.jpg" alt="image 1" />
<img src="images/gallery/02.jpg" alt="image 2" />
<img src="images/gallery/03.jpg" alt="image 3" />
<img src="images/gallery/04.jpg" alt="image 4" />
<img src="images/gallery/05.jpg" alt="image 5" />
<img src="images/gallery/06.jpg" alt="image 6" />
</div>
<div class="box home_box1 color1">
<img src="images/templatemo_services.jpg" alt="Services" />
</div>
<div class="box home_box1 color2">
<img src="images/testimonial.jpg" alt="Testimonial" />
</div>
<div class="box home_box2 color3">
<div id="social_links">
<img src="images/facebook.png" alt="Facebook" />
<img src="images/flickr.png" alt="Flickr" />
<img src="images/twitter.png" alt="Twitter" />
<img src="images/youtube.png" alt="Youtube" />
<img src="images/vimeo.png" alt="Vimeo" />
<div class="clear h20"></div>
<h3>Social</h3>
</div>
</div>
<div class="box home_box1 color4 no_mr">
<img src="images/contact.jpg" alt="Contact" />
</div>
</div> <!-- END of home -->
<div class="section section_with_padding" id="services">
<h2>Services</h2>
<div class="img_border img_fl">
<img src="images/templatemo_image_03.jpg" alt="image" />
</div>
<div class="half right">
<ul class="list_bullet">
<li>Maecenas ac odio ipsum donec cursus</li>
<li>Fusce risus tortor, interdum</li>
<li>Proin facilisis ullamcorper</li>
<li>Sed vel justo quis ligula</li>
<li>Ut tristique sagittis arcu</li>
<li>Maecenas ac odio ipsum donec cursus</li>
<li>Fusce risus tortor, interdum</li>
</ul>
</div>
<div class="clear h40"></div>
<div class="img_border img_fr">
<img src="images/templatemo_image_04.jpg" alt="image" />
</div>
<div class="half left">
<p><em>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam mauris ipsum, pulvinar sit amet varius at, placerat ut felis.</em></p>
<p>Donec vitae tortor non ipsum tristique condimentum ac ac nulla. Etiam sagittis iaculis dolor ut euismod. Nam faucibus, risus at consequat malesuada, urna turpis sagittis libero, sodales hendrerit dui arcu et nisi. Praesent pulvinar, dolor id lacinia pulvinar, mi ligula tempor libero, et semper sem dolor et elit. </p>
</div>
home
Previous
Next
</div>
<div class="section section_with_padding" id="testimonial">
<h2>Testimonial</h2>
<p><em>Aliquam venenatis, quam a semper blandit, lectus mi convallis orci, ut dictum ante leo non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris placerat, urna in gravida rhoncus, mi elit luctus nibh, a luctus erat elit vel quam. </em></p>
<div class="clear h40"></div>
<div class="half left">
<div class="img_border img_fl">
<img src="images/templatemo_image_01.jpg" alt="image 1" />
</div>
<p>Fusce nec felis id lacus sollicitudin vulputate. Proin tincidunt, arcu id pellentesque accumsan, neque dolor imperdiet ligula. </p>
<cite>Walker - <span>TemplateMo.com</span></cite>
</div>
<div class="half right">
<div class="img_border img_fl">
<img src="images/templatemo_image_01.jpg" alt="image 2" />
</div>
<p>Fusce nec felis id lacus sollicitudin vulputate. Proin tincidunt, arcu id pellentesque accumsan, neque dolor imperdiet ligula. </p>
<cite>Jason - <span>TemplateMo.com</span></cite>
</div>
<div class="clear h40"></div>
<div class="half left">
<div class="img_border img_fl">
<img src="images/templatemo_image_01.jpg" alt="image 3" />
</div>
<p>Fusce nec felis id lacus sollicitudin vulputate. Proin tincidunt, arcu id pellentesque accumsan, neque dolor imperdiet ligula. </p>
<cite>Danny - <span>FlashMo.com</span></cite>
</div>
<div class="half right">
<div class="img_border img_fl">
<img src="images/templatemo_image_01.jpg" alt="image 4" />
</div>
<p>Fusce nec felis id lacus sollicitudin vulputate. Proin tincidunt, arcu id pellentesque accumsan, neque dolor imperdiet ligula. </p>
<cite>Katey - <span>KoFlash.com</span></cite>
</div>
home
Previous
Next
</div>
<div class="section section_with_padding" id="contact">
<h2>Contact</h2>
<div class="half left">
<h4>Quick Contact Form</h4>
<p>Nullam a tortor est, congue fermentum nisi. Maecenas nulla nulla, eu volutpat euismod, scelerisque ut dui.</p>
<div id="contact_form">
<form method="post" name="contact" action="#contact">
<div class="left">
<label for="author">Name:</label> <input name="author" type="text" class="input_field" id="author" maxlength="40" />
</div>
<div class="right">
<label for="email">Email:</label> <input name="email" type="text" class="input_field" id="email" maxlength="40" />
</div>
<div class="clear"></div>
<label for="text">Message:</label> <textarea id="text" name="text" rows="0" cols="0"></textarea>
<input type="submit" class="submit_btn float_l" name="submit" id="submit" value="Send" />
</form>
</div>
</div>
<div class="half right">
<h4>Mailing Address</h4>
460-820 Duis lacinia dictum, <br />
Vestibulum auctor, 12650<br />
Nam rhoncus, diam a mollis<br />
<strong>Email: info[ at ]companyname[ dot ]com</strong><br />
<div class="clear h20"></div>
<div class="img_nom img_border"><span></span>
<iframe width="320" height="240" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Central+Park,+New+York,+NY,+USA&aq=0&sll=14.093957,1.318359&sspn=69.699334,135.263672&vpsrc=6&ie=UTF8&hq=Central+Park,+New+York,+NY,+USA&ll=40.778265,-73.96988&spn=0.033797,0.06403&t=m&output=embed"></iframe>
</div>
home
Previous
</div>
</div>
</div>
</div>
<div id="templatemo_footer">
Copyright © 2072 Your Company Name | Designed by Free CSS Templates
</div>
</body>
</html>
CSS:
body{
margin: 0;
padding: 0;
color: #ddd;
font-size: 12px;
line-height: 1.6em;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
background-color: #000;
}
a, a:link, a:visited { color: #9CF; font-weight: normal; text-decoration: none }
a:hover { color: #FF6; text-decoration: none; }
ul, li {
padding:0;
margin:0;
list-style:none;
}
h1, h2, h3, h4, h5, h6 { color: #fff; font-weight: normal; }
h1 { font-size: 58px; margin: 0 0 30px; padding: 5px 0 }
h2 { font-size: 34px; margin: 0 0 30px; padding: 5px 0 }
h3 { font-size: 20px; margin: 0 0 20px; padding: 0; }
h4 { font-size: 16px; margin: 0 0 15px; padding: 0; }
h5 { font-size: 14px; margin: 0 0 10px; padding: 0; }
h6 { font-size: 12px; margin: 0 0 5px; padding: 0; font-weight: 700 }
p { padding: 0; margin: 0 0 15px 0 }
.clear{
clear:left;
}
cite { font-weight: bold; color:#fff; }
cite a, cite a:link, cite a:visited { font-size: 12px; text-decoration: none; font-style: normal }
cite span { font-weight: 400; color: #ccc; }
.list_bullet { margin: 0 0 10px 15px; padding: 0; list-style: none }
.list_bullet li { color:#fff; margin: 0 0 7px 0; padding: 0 0 0 20px; background: url(images/templatemo_list.png) no-repeat scroll 0 6px }
.list_bullet li a { color: #fff; font-weight: normal; text-decoration: none }
.list_bullet li a:hover { color: #fff }
.no_bullet { margin: 0; padding: 0; list-style: none }
.no_bullet li { margin: 0 0 20px 0; padding: 0 }
a.header { display: block; font-weight: 700 }
.half { width: 370px }
.h20 { height: 20px }
.h40 { height: 40px }
img { margin: 0; padding: 0; border: none }
.img_border { background: #fff; padding: 4px; border: 1px solid #ccc }
.img_nom { display: inline-block; margin-bottom: 15px }
.img_fl { float: left; margin: 3px 15px 5px 0 }
.img_fr { float: right; margin: 3px 0 5px 15px }
.left { float: left }
.right { float: right }
#templatemo_header {
width: 800px;
margin: 0 auto;
padding: 30px 0;
}
#templatemo_main {
width: 800px;
height: 487px;
overflow: hidden;
margin: 0 auto;
}
#templatemo_footer {
width: 800px;
margin: 0 auto;
padding: 20px 0;
text-align: right
}
#site_title { display: block }
#site_title a { color: #fff; font-weight: 700; letter-spacing: 10px; line-height: 30px }
#content{
overflow:hidden;
width: 7000px;
position:relative;
height: 487px;
}
.section {
position:relative;
float:left;
width: 800px;
height: 487px;
margin-right: 20px;
}
.section a.slider_nav_btn { position: absolute; top: 0; width: 50px; height: 46px; display: block; background-image: url(images/slider_nav_btn.jpg); text-indent: -10000px }
.section a.home_btn { right: 50px; background-position: 102px 0 }
.section a.previous_btn { right: 100px; background-position: 0 0 }
.section a.next_btn { right: 0px; background-position: 50px 0 }
.box { float: left; margin: 0 10px 10px 0 }
#home_about { width: 314px; height: 314px }
#home_gallery { width: 476px; height: 314px }
.home_box1 { width: 152px; height: 152px }
.home_box2 { width: 314px; height: 152px }
.color1 { background: #d0b500 }
.color2 { background: #c75000 }
.color3 { background: #00afce }
.color4 { background: #a4c700 }
#home_gallery a { display: block; float: left; width: 152px; height: 152px; margin: 0 10px 10px 0 }
#home_gallery a.no_mr { margin-right: 0 }
#social_links {
text-align: center;
padding: 40px 0 0 0
}
#social_links a {
display: block;
float: left;
width: 48px;
height: 48px;
margin-left: 12px
}
#gallery {
}
#gallery li {
width: auto;
height: auto;
float: left;
width: 152px;
height: 245px;
background: none;
margin: 0 10px 10px 0;
}
#gallery li a {
display: block;
}
#gallery li a img { }
#gallery li.no_margin_right { margin-right: 0 }
#contact_form { padding: 0; width: 330px }
#contact_form form { margin: 0px; padding: 0px; }
#contact_form form .input_field { width: 150px; padding: 5px; color: #CCC; border: 1px solid #666; background: #222; margin-bottom: 10px; }
#contact_form form label { display: block;font-size: 11px }
#contact_form form textarea {
clear: both;
width: 320px; height: 120px;
padding: 5px;
color: #CCC;
border: 1px solid #666;
font-family: Arial, Helvetica, sans-serif;
background: #222;
margin-bottom: 10px;
}
#contact_form form .submit_btn { font-size: 12px; background: #333; color: #CCC; cursor:pointer; border: 1px solid #666; padding: 5px 10px; }
.no_mr { margin-right: 0 }
I'm pretty sure the problem is either here:
#templatemo_main {
width: 800px;
height: 487px;
overflow: hidden;
margin: 0 auto;
}
or here:
#content{
overflow:hidden;
width: 7000px;
position:relative;
height: 487px;
}
I'm not sure what to adjust and any help would be appreciated a lot!
PS: I'm new to stack over flow and I don't know if this is the type of questions you're supposed to be asking. Please let me know if it isn't ! :)
As the support of CSS3 in IE10 is good enough, I guess you're testing your site against old versions of that browser.
There is a lot of css elements that won't work on old IE versions. I suggest you use some library like Modernizr to get a little more compatibility.
Your code is too extensive for the little info you provide. What's the exact error you're observing? But taking a fast look I see some "display: inline-block;" that certainly may not work. You should try the combination of "float: left;" with "display: block" and a given width for those elements.
If you specify a bit more the exact error you're finding, so we can point ourselves on the relevant part of the code, maybe you could get more help.
In the following code I'm trying to make the elements within the green div.middle elements to vertically align to the middle.
I've tried the table-cell approach but cant get it working. I heard it's due to absolute positioning and tried this solution with no luck:
CSS - Vertical align table-cell don't work with position absolute
This appears to be due to .table-cell having no height - I would like it's height to equal its parent container, which varies in height.
jsfiddle:
http://jsfiddle.net/q5jKM/1/
Does anyone know a way of getting the green div.middle elements to vertically align to the middle? Any method will do. It just needs to be capable of handling its variable height. Is it possible with just css? Or will I have to jump in with a bit of jQuery?
Edit:
box-align also isn't a viable solution due to browser support and being replaced with new standard.
CSS
html,body{height:100%;margin:0}
#sidebar {
width: 22em;
position:fixed;
top: 0;
bottom: 0;
left: 0;
z-index:2;
color: #ffffff;
background-color: #333333;
overflow:auto;
height: 100%;
}
#sidebar .nav {
width: 3em;
float: right;
background-color: #2e2e2e;
border-left: 2px groove #454545;
height: 100%;
position:relative;
min-height:34em;
}
#sidebar .content {
height: 100%;
width: 16.875em; /* 17-(2/16) - 20em - .nav - nav border*/
float:left;
position:relative;
min-height:34em;
}
#sidebar .top {
position:absolute;
top:0;
}
#sidebar .bottom {
position:absolute;
bottom:0;
}
#sidebar .middle {
position: absolute;
bottom: 12em; /* 3.125*3 */
top: 16em; /* 3.125*4 */
background: green;
}
.content .middle {
overflow:auto;
}
#sidebar .content > div {width: 16.875em; } /*.top .middle .bottom*/
#sidebar .nav > div {width:3em; } /*.top .middle .bottom*/
/*table-cell trying get vertical-align working*/
#sidebar .table-cell {display:table-cell; vertical-align: middle; }
#sidebar .content p, #sidebar .content li, #sidebar .content img {font-size: .75em; color: #dddddd;}
#sidebar ul {margin:0; padding: 0;}
#sidebar .nav li {
padding: .5625em;
list-style:none;
}
#sidebar .nav li img {
height: 1.875em;
width: 1.875em
}
#sidebar .nav .top li { border-bottom: 2px groove #454545 }
#sidebar .nav .bottom li { border-top: 2px groove #454545 }
.content li {
position:relative;
display:block;
background-color: #444;
padding: .72em;
border-radius: .8em;
border-bottom: 1px solid #292929;
border-top: 1px solid #4c4c4c;
text-align: center;
font-size: 1em;
letter-spacing: .1em;
font-weight: normal;
height: 1.2em;
}
.content li:after {
content:"";
position:absolute;
display:block;
width:0;
top:.11em; /* controls vertical position */
right:-.852em; /* value = - border-left-width - border-right-width */
border-style:solid;
border-width:1.2em 0 1.2em 1.2em;
border-color:transparent #444;
}
.content .top li{margin: .95em 0 1.9em 0;}
.content .bottom li{margin: 1.9em 0 .95em 0;}
.content .logo {
text-align: center;
padding: 1em 0 2em 0;
width: 100%;
border-bottom: 2px groove #454545;
}
.content p.welcome {
text-align: center;
line-height: 1.5em;
margin: 1em 0;
}
HTML
<div id="sidebar">
<div class="nav">
<div class="top">
<ul>
<li><img src="_images/attributes/attribute2.svg"></li>
<li><img src="_images/attributes/attribute2.svg"></li>
<li><img src="_images/attributes/attribute2.svg"></li>
<li><img src="_images/attributes/attribute2.svg"></li>
</ul>
</div>
<div class="middle"><div class="table-cell"><p>test</p></div></div>
<div class="bottom">
<ul>
<li><img src="_images/attributes/attribute2.svg"></li>
<li><img src="_images/attributes/attribute2.svg"></li>
<li><img src="_images/attributes/attribute2.svg"></li>
</ul>
</div>
</div>
<div class="content">
<div class="top">
<ul>
<li>SIDEBAR LINK</li>
<li>SIDEBAR LINK</li>
<li>SIDEBAR LINK</li>
<li>SIDEBAR LINK</li>
</ul>
</div>
<div class="middle"><div class="table-cell">
<div class="logo"><img src="_images/g.svg"></div>
<p class="welcome">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum tellus viverra neque bibendum in mattis ante dignissim. Nam mattis feugiat lorem porttitor adipiscing. Aliquam erat volutpat. Nunc feugiat magna vitae mauris egestas euismod. In hac habitasse platea dictumst. Praesent magna sem, malesuada non fermentum vel, luctus quis mauris. Duis quam purus, ornare vitae eleifend sed, malesuada eget libero. Phasellus sed lorem risus, nec placerat urna. In magna turpis, accumsan ac egestas quis, dictum vel massa. Nulla vitae magna arcu. Maecenas sit amet vestibulum urna. Integer feugiat dignissim leo sed ornare. Maecenas auctor ultricies dui, pulvinar tincidunt velit feugiat quis. Sed egestas ornare elit, et fringilla quam viverra ut.</p>
</div></div>
<div class="bottom">
<ul>
<li>SIDEBAR LINK</li>
<li>SIDEBAR LINK</li>
<li>SIDEBAR LINK</li>
</ul>
</div>
</div>
</div>
add a parent div with display:table and height:100% to .table-cell will fix this
So the html structure wil be :
<div class="middle">
<div class="table">
<div class="table-cell">
<p>test</p>
</div>
</div>
</div>
add this Style:
#sidebar .table{
display:table;
height:100%;
}
See jsfiddle I have modified
You can set a height for that table-cell.
.table-cell{
height: 200px;/* for example */
vertical-align: middle;
display: table-cell;}
<div class="middle"><div class="table-cell"><p>test</p></div></div>
I used to have problems with vertical-align property before. I tend to realize that this property seemed to be more suited for tables. So I added this in your code on JSFiddle and it looked alright to me. Could you see if this would work with you?
<div class="middle">
<table height="100%" width="100%">
<tr>
<td style="vertical-align:middle">
<p>test</p>
</td>
</tr>
</table>
</div>
I know, this topic has been opened 1000 times, but I didn't find a suitable solution (or a solution I could understand).
I have a simple page (wordpress) with a fixed nav menu on the left, scrollable content in center and a fixed footer (always visible).
I have 2 problems I have tried to solve in every way:
1) the wrapper (100% height) wraps ok until you scroll the page, but does not extend after the scroll (see attached image, page is scrolled to bottom).
2) the content at the bottom is under the footer, I couldn't find a way to apply a -30 padding to make readable the final part of the content ( I think this relates to the problem no.1).
Here is the CSS (also used a reset.css based on YUI reset):
/* LAYOUT */
.aligncenter { display:block; margin:0 auto }
.alignleft { float:left }
.alignright { float:right }
.wp-caption { border:1px solid #666; text-align:center; background:#ccc; padding:10px; margin:10px }
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0 }
/* GENERAL LAYOUT */
html, body{
margin : 0;
padding : 0;
height : 100%;
border : none;
}
#wrapper{
min-height: 100%;
width: 100%;
background: red;
overflow: hidden;
}
#container{
width: 960px;
margin-left: 40px;
padding-bottom: 30px
}
#navigation{
position: fixed;
overflow:hidden;
width: 200px;
}
#content{
position: absolute;
overflow: auto;
width: 420px;
margin-left: 220px;
}
li > a {
display: block;
}
a {outline: none;}
/* NAVIGATION */
h1.logo {
height: 155px;
}
#navigation ul{
margin:0;
padding:0;
text-align: right;
}
#navigation ul li{
height:28px;
display: inline-block;
color:#000;
padding: 0 0 0 0;
overflow:hidden;
line-height: 28px;
margin-bottom: 7px;
}
#navigation li a{
padding: 0 28px 0 0;
}
.nav-blog{
width:190px;
border-left-color: #d1bbe8;
border-left-width: 10px;
border-left-style: solid;
background-color: #edece6;
}
.nav-eventi{
width:190px;
border-left-color: #aa87a0;
border-left-width: 10px;
border-left-style: solid;
background-color: #edece6;
}
.nav-bio{
width:190px;
border-left-color: #e2b893;
border-left-width: 10px;
border-left-style: solid;
background-color: #edece6;
}
.nav-discography{
width:190px;
border-left-color: #365f68;
border-left-width: 10px;
border-left-style: solid;
background-color: #edece6;
}
.nav-photos{
width:190px;
border-left-color: #545768;
border-left-width: 10px;
border-left-style: solid;
background-color: #edece6;
}
.nav-videos{
width:190px;
border-left-color: #4b5668;
border-left-width: 10px;
border-left-style: solid;
background-color: #edece6;
}
.nav-contact{
width:190px;
border-left-color: #686055;
border-left-width: 10px;
border-left-style: solid;
background-color: #edece6;
}
/* ----------Active links----------- */
.home .nav-blog
{
width: 150px;
}
/* POST */
#ilpost{
width: 420px;
margin: 0 0 18px 0;
}
.spaziovuoto{
height: 155px;
}
.type-blog{
border-top-color: #d1bbe8;
border-top-style: solid;
border-top-width: 12px;
}
#tempo{
height: 32px;
background: url('../images/flatback.png');
}
.iltitolo{
background-color: #edece6;
}
.ilcontenuto{
background-color: #edece6;
}
/* PLAYER */
#player{
clear: both;
width: 100%;
position: fixed;
bottom: 0px;
height: 30px;
background: #000;
color:#fff;
}
And the HTML:
(head omitted)
<body class="home blog">
<div id="wrapper">
<div id="container">
<div id="navigation">
<h1 class="logo">Logo</h1>
<ul>
<li class="nav-blog "><a href="/">blog</li>
<li class="nav-eventi sel">eventi</li>
<li class="nav-bio sel">bio</li>
<li class="nav-discography sel">discography</li>
<li class="nav-photos sel">photos</li>
<li class="nav-videos sel">videos</li>
<li class="nav-contact sel">contact</li>
</ul>
</div><!-- .navigation -->
<script type="text/javascript">
jQuery(function($){
$.supersized({
//Background image
transition_speed : 50,
slides : [ { image : 'http://localhost/xxxxxxxx/wp-content/themes/xxxxxxxxxx/images/sfondotest1080.jpg' } ]
});
});
</script>
<div id="content">
<div class="spaziovuoto"></div>
<!-- LOOOOOOOOOOOP -->
<div id="ilpost" class="type-blog">
<div id="tempo">
Uncategorized // 10 April, 2011</div><!-- .tempo -->
<div class="ilcontenuto">
<p class="iltitolo">test post 4</p>
<p><!-- p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica} -->Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue.</p>
<p> </p>
</div>
</div><!-- .ilpost -->
<div id="ilpost" class="type-blog">
<div id="tempo">
Uncategorized // 10 April, 2011</div><!-- .tempo -->
<div class="ilcontenuto">
<p class="iltitolo">test post 3</p>
<p><!-- p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica} -->Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue.</p>
<p> </p>
</div>
</div><!-- .ilpost -->
<div id="ilpost" class="type-blog">
<div id="tempo">
Uncategorized // 10 April, 2011</div><!-- .tempo -->
<div class="ilcontenuto">
<p class="iltitolo">test post 2</p>
<p><!-- p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica} --> <!-- p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica} -->Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue.</p>
<p> </p>
</div>
</div><!-- .ilpost -->
<div id="ilpost" class="type-blog">
<div id="tempo">
Uncategorized // 10 April, 2011</div><!-- .tempo -->
<div class="ilcontenuto">
<p class="iltitolo">Hello world!</p>
<p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p>
</div>
</div><!-- .ilpost -->
</div><!-- .content -->
<ul class="xoxo">
</ul>
</div> <!-- container -->
</div> <!-- E wrapper-->
<div id="player">Player</div>
</body>
</html>
Just in case, I attached an image with an explanation.
Thanks for your help!
#navigation{
position: fixed;
overflow:hidden;
width: 200px;
left: 40px; /* add this */
}
#content{
/*position: absolute; remove this*/
overflow: auto;
width: 420px;
margin-left: 220px;
}
your page has no content.. well it thinks it doesn't ;)
so remove the absolute positioning from the content .. let the content remain in the flow this should mean that the existing min-height on the wrapper actually gets a chance to work (at the minute it thinks there's nothing in it so it can't grow)
that then appears to work but IE7 gets a bit pernickety, like it does and moves the nav over the content - so just explicitly (give a tsk and) tell it where you want it to be (help it count!) and add the left position on #navigation
Have you tried using min-height: 100% instead of height: 100% on your body and html styles?
As far as the wrapper, take off the 100% height. It will default to auto height and expand to the content.
For the content under the footer you just apply a bottom padding to the content, and take off the absolute positioning. Just put a left margin on it (and possibly a float).