I know this CSS question has been asked everywhere around the internet. But Im having massive difficulty making the purple and green divs fill their remaining space so they are the same height as the yellow twitter feed:
http://jsfiddle.net/n5558/
HTML
<div id="main">
<div id="primary" class="home">
<div id="content" role="main">
<div id="main-content" class="container_12">
<div id="info" class="grid_4">
<div id="networking">
<h2>RSViP - Business Networking</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rhoncus lobortis orci, sed vestibulum leo dapibus et. Fusce in dolor velit, sit amet vehicula est. Integer elit sapien.</p> Apply for Business Networking
Free Trial
</div>
<div id="card">
<h2>RSViP - Card</h2>
</div>
</div>
<div id="twitter" class="grid_4">
<h2>News / Twitter Feed</h2>
<ul>
<li>
<p>Details of our next Business Network Social & 5th Birthday have been finalised- Invitations going out tomorrow to members #HartsNottingham
</p>
<p id="date">3rd Apr 04:57 PM</p>
</li>
<li>
<p>Details of our next Business Network Social & 5th Birthday have been finalised- Invitations going out tomorrow to members #HartsNottingham
</p>
<p id="date">3rd Apr 04:08 PM</p>
</li>
<li>
<p>Details of our next Business Network Social & 5th Birthday have been finalised- Invitations going out tomorrow to members #HartsNottingham
</p>
<p id="date">3rd Apr 03:28 PM</p>
</li>
<li>
<p>Details of our next Business Network Social & 5th Birthday have been finalised- Invitations going out tomorrow to members #HartsNottingham
</p>
<p id="date">3rd Apr 03:28 PM</p>
</li>
</ul>
</div>
<div id="col3" class="grid_4">
<h2>RSViP Free Subscription</h2>
</div>
</div>
</div>
</div>
</div>
CSS
.home #main-content {
margin-top: 23px;
margin-bottom: 23px;
height: 100%;
}
/*Col1 - Info*/
.home #info {
width: 270px;
padding-right: 30px;
background: url('images/divider.png') repeat-y top right;
height: 100%;
background: purple;
}
/*Col2 - Twitter*/
.home #twitter {
padding-left: 10px;
width: 290px;
background: yellow;
}
.home #twitter ul {
list-style: none;
margin: 0; padding: 0;
}
/* Col3 */
.home #col3 {
background: green;
}
/* 960.gs */
Thank you, Peter
Heres my Solution / Hack that worked:
.home #main-content {
margin-top: 23px;
margin-bottom: 23px;
overflow: hidden;
}
.home #main-content div {
padding-bottom: 9999px;
margin-bottom: -9999px;
}
You can use jquery to do it easy. http://jsfiddle.net/Bushwazi/tuKEJ/
$('#main-content > div').height($('#main-content').height());
Related
I working in a page builder
For a shop, I am creating. I can change the CSS which is great.
I’m struggling to get a responsive resize of the images in this 4 column row. Since the images are different heights I have to have to set a height and have responsive width. Is there any way to get it to scale correctly?
The width is auto and the height is a set height based on the size of the screen.
You can see that when I resize it separates from the box and then sometimes get squished.
object-fit property
I did your design by using display : flex; and object-fit : cover; properties. I think that this object-fit property directly on the image is the only lacking property to make your images still looking good despite the screen resolution.
Notice the use of object-position : center; which makes the resizing always axed on the center of the image.
index.html
<div class="foo">
<div class="bar">
<img src="https://picsum.photos/200/300" alt="">
<div>
<h4>Lorem, ipsum dolor sit amet consectetur adipisicing.</h1>
<p>$42</p>
</div>
</div>
<div class="bar">
<img src="https://picsum.photos/500/200" alt="">
<div>
<h4>Lorem, ipsum dolor sit amet consectetur adipisicing.</h1>
<p>$42</p>
</div>
</div>
<div class="bar">
<img src="https://picsum.photos/200/700" alt="">
<div>
<h4>Lorem, ipsum dolor sit amet consectetur adipisicing.</h1>
<p>$42</p>
</div>
</div>
<div class="bar">
<img src="https://picsum.photos/500/400" alt="">
<div>
<h4>Lorem, ipsum dolor sit amet consectetur adipisicing.</h1>
<p>$42</p>
</div>
</div>
</div>
style.css
body {
background-color: #f7f7f7;
font-family: Arial, Helvetica, sans-serif;
}
.foo {
width: 100%;
display: flex;
gap: 20px;
}
.bar {
background-color: #ffffff;
display: flex;
flex-direction: column;
width: 100%;
border-radius: 15px;
overflow: hidden;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.bar > img {
width: 100%;
height: 200px;
object-fit: cover;
object-position: center;
}
h4 {
color:#9ccf74;
}
.bar > div {
padding: 10px;
height: 100px;
}
This question already has answers here:
vertical-align with Bootstrap 3
(26 answers)
Closed 7 years ago.
I'm using Twitter Bootstrap and am trying to vertically center text next to an image that is larger than the current text.
I can't use line-height because the text goes over more than one line and I also want to allow for possible additions to the text; so I went to the display: table; display: table-cell; method but it still refuses to work.
Here is my HTML for the respective section:
<div class="fs">
<div class="container">
<div class="wrapper row">
<div class="icon col-md-2">
<a href="" target="blank">
<img src="fs-icon.jpg" width="170" height="76" alt="Flying Solo Icon">
</a>
</div>
<div class="text col-md-10">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt, lacus sed pharetra luctus, odio purus faucibus nunc, mattis molestie sapien libero sit amet leo.
</span>
</div>
</div>
</div>
<!-- Container Ends -->
</div>
<!-- FS Ends -->
CSS:
#about .fs {
padding: 30px 0;
}
#about .fs .wrapper {
display: table;
}
#about .fs .icon {
display: table-cell;
}
#about .fs .text {
display: table-cell;
min-height: 76px;
vertical-align: middle;
}
... and here it is on CodePen: http://codepen.io/anon/pen/XbdRXE
I think the CSS may be clashing with the behavior of the default Bootstrap CSS. However, you could bypass this method altogether and try using this as a custom class:
.vertical-center {
display: inline-block;
vertical-align: middle;
float: none;
}
Just apply it to your span element.
Inside a div I want a full width background color and center the content inside. I have read in some other posts that it needs an outer div to set the background-color there, and then an inner div with the width of my content and margin:0 auto;. I tried that but it doesn't work. I tried floating my content left and this didn't work either.
Here is my code. The problem is in the div class="themeDesign" where i put the background color. In the div class="themeDesignicons" when i put width:1000px the one of the li elements extends onto the next line, but with width:1300px they appear on the same line without centering. Why? Does it matter first-child? I cant go on. Thanks in advance
*{
margin:0px;
padding:0px;
}
body{
width:100%;
}
header{
background-color:#088da5;
overflow:hidden;
padding:15px 0;
}
.main-header{
width:1300px;
margin:0 auto;
}
.main-header .left-mainheader{
float:left;
margin-right:400px;
}
.main-header .left-mainheader ul li{
display:inline-block;
margin-right:26px;
}
.main-header .left-mainheader li a{
text-decoration:none;
color:white;
}
.main-header .right-mainheader{
float:left;
}
.main-header .right-mainheader ul li{
display:inline-block;
margin-right:15px;
}
.main-header .right-mainheader ul li a{
text-decoration:none;
color:white;
}
.left-mainheader img{
padding-right:8px;
}
header .header h1{
background-image:url(images/logoheader.png);
width:440px;
height:84px;
margin:60px auto;
overflow:hidden;
clear:both;
}
.header ul{
margin:25px auto;
width:440px;
}
.header li {
display:inline-block;
margin:0 15px 0 0;
}
.header li a{
color:black;
text-decoration:none;
font-size:15px;
font-family: tahoma;
}
header li a:hover{
text-decoration:underline;
}
.header .headermesa{
border-top:1px solid #666633;
}
.slider{
background-color:#f7f8fa;
}
.slidermesa{
margin:0 auto;
width:1200px;
height:421px;
}
.slide img{
border-top:1px solid #666633;
width:1200px;
height:421px;
}
.themeDesign{
background-color:#f7f8fa;
}
.themedesignheadings{
margin:0 auto;
width:1000px;
padding:35px 0;
border-bottom:1px dashed #877676;
}
.themeDesignicons{
width:1000px;
margin:0 auto;
}
.themeDesignicons ul li{
display:inline-block;
width:250px;
}
<!DOCTYPE html>
<html>
<head>
<title>-Tutorial for psd-revenant</title>
<meta charset="utf-8">
</head>
<body>
<header>
<div class="main-header">
<div class="left-mainheader">
<ul>
<li>
<img src="images/phoneIcon-header.png"/> +565 975 658
</li>
<li>
<img src="images/emailheader3.png"/>info#premiumcoding.com
</li>
<li>
<img src="images/timeheader2_03.png"/>Monday-Friday : 8.00-20.00
</li>
</ul>
</div>
<div class="right-mainheader">
<ul>
<li>Latest News</li>
<li>Login</li>
<li>Register</li>
<li>About Us</li>
</div>
</div>
<div class="header">
<h1></h1>
<div class="headermesa">
<ul>
<li>Home</li>
<li>Apparel</li>
<li>Fashion</li>
<li>News</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</header>
<div class="slider">
<div class="slidermesa">
<div class="slide">
<img src="images/mainslide.png"/>
</div>
</div>
</div>
<div class="themeDesign">
<div class="themedesignheadings">
<h2>Check our latest Wordpress Theme which implements a Page Builder and a Revolution Slider</h2>
<p>Learn how to build Wordpress Themes with ease with a premium Page Builder which allows you to add new Pages in seconds!</p>
</div>
<div class="themeDesignicons">
<ul>
<li>
<div class="disc-cam">
<div class="icon cam2"></div>
</div>
<div class="disc-text">
<h3>Responsive Design</h3>
<p>Lorem ipsum dolor sit amet, co
ctetuer adipiscing elit, sed di
nonummy nibh euismod te.</p>
Read More<img src="images/arrow.png"/>
</div>
</li>
<li>
<div class="disc-cam">
<div class="icon cam2"></div>
</div>
<div class="disc-text">
<h3>Responsive Design</h3>
<p>Lorem ipsum dolor sit amet, co
ctetuer adipiscing elit, sed di
nonummy nibh euismod te.</p>
Read More<img src="images/arrow.png">
</div>
</li>
<li>
<div class="disc-cam">
<div class="icon cam2"></div>
</div>
<div class="disc-text">
<h3>Responsive Design</h3>
<p>Lorem ipsum dolor sit amet, co
ctetuer adipiscing elit, sed di
nonummy nibh euismod te.</p>
Read More<img src="images/arrow.png">
</div>
</li>
<li>
<div class="disc-cam">
<div class="icon cam2"></div>
</div>
<div class="disc-text">
<h3>Responsive Design</h3>
<p>Lorem ipsum dolor sit amet, co
ctetuer adipiscing elit, sed di
nonummy nibh euismod te.</p>
Read More<img src="images/arrow.png">
</div>
</li>
</ul>
</div>
</div>
Try this
.themeDesignicons {
width: auto;
margin: 0 auto;
text-align: center;
}
I'm trying to keep a couple of lists aligned to the left with some text and un-wrapping around an image on desktop/tablet and mobile but don't seem to be making a lot of progress.
Here's the Codepen: http://codepen.io/carlos_serrano/pen/ikjeg
and here the code for what I have so far:
HTML:
<div class="content">
<img src="any 100x 100 image.gif">
<h3>Heading</h3>
<p>Just random text here.</p>
</div>
<div class="linkcontainer">
<div class="linkleft">
<ul>
<li>Left Item 1</li>
<li>Left Item 2</li>
<li>Left Item 3</li>
</ul>
</div>
<div class="linkright">
<ul>
<li>Right Item 1</li>
<li>Right Item 2</li>
<li>Right Item 3</ul>
</div>
Here's the CSS:
p{
overflow: hidden;
}
img{
float:left;
margin: 0 25px;
}
.linkcontainer {
width: 50%;
padding-bottom: 25px;
clear: both;
}
.linkleft, .linkright {
width: 100%;
float: right;
}
#media only screen and (min-width: 481px) {
.linkleft, .linkright {
display: inline-block;
width: 30%;
float: left;
}
}
Ok, if I understood your question (and clarification in your comment) correctly, this is what you need to do:
First, move the heading and the text into the linkcontainer:
<div class="content">
<img src="http://www.labyrinth.net.au/~toonist/flash_goodies/graphics/image_sizes/rotate_circle_100.gif" />
</div>
<div class="linkcontainer">
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident deserunt architecto quasi quaerat cupiditate quis harum ipsum ipsa veritatis suscipit iure velit asperiores ipsam vitae reiciendis quos aliquam doloribus repellendus.</p>
<div class="linkleft">
<!-- ... -->
</div>
</div>
Then ensure content and linkcontainer are both floated left:
.content {
float:left;
margin:0 25px
}
.linkcontainer {
float:left;
padding-bottom: 25px;
}
I updated your pen: http://codepen.io/anon/pen/aAiqj
EDIT: Upon further clarification, there is a better solution that will help prevent wrapping the heading, text and menus on smaller screens: make sure you wrap the 2 main divs into a wrapper div and set the width of this one to the total of the inner divs (plus margins).
#wrapper {
width: 750px
}
.content {
float: left;
margin: 0 25px;
width: 200px;
}
.linkcontainer {
float: left;
padding-bottom: 25px;
width: 500px;
}
<div id="wrapper">
<div class="content">
<img src="http://www.labyrinth.net.au/~toonist/flash_goodies/graphics/image_sizes/rotate_circle_100.gif">
</div>
<div class="linkcontainer">
<!-- ... -->
</div>
</div>
Here is your newest pen: http://codepen.io/anon/pen/hJbmr
I am working on getting a two column layout that extends to the bottom of my page.
However, my sidebar cuts off at the container-fluid height even though I am trying to get it to extend to the whole page.
What is weird is that my content column works fine.
HTML:
<div class="container-fluid">
<div class="row-fluid columns no-margin fill">
<div id="sidebar" class="span2 columns no-margin right-edge"></div>
<div id="contentWrapper" class="span10 columns no-margin pull-right"></div>
</div>
</div>
CSS:
html, body, form {
height: 100%;
min-height: 100%;
background-image:url("../../images/lightGreyBackground.png");
background-repeat: repeat;
font-family:"Segoe UI", Helvetica, Arial, Sans-Serif;
}
.container-fluid {
margin: 0 auto;
height: auto;
padding: 0px;
}
.columns {
height: 100%;
min-height:100%;
margin: 0px;
width: 100%;
}
.fill {
position: absolute;
height: 100%;
min-height: 100%;
}
.no-margin {
margin-left: 0%;
width: 100%;
}
.right-edge {
border-right: 1px;
border-right-style: solid;
border-right-color: #CCCCCC;
}
#sidebar {
background-color: White;
padding-top:15px;
}
For have 2 column :
<html>
<head>
<style type="text/css">
.container-fluid { width: 100%;}
.float {
float: left;
width: 50%; /* Size colonne */
margin: 1em 0; /* Margin colonne */
}
.spacer { clear: both; }
</style>
</head>
<body>
<div class="container-fluid">
<div class="float">Colonne 1</div>
<div class="float">Colonne 2</div>
<div class="spacer"></div>
</div>
</body>
</html>
Use the framework bootstrap or 960.gs, powerful front-end framework for faster and easier web development.
With bootstrap 3 :
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus.</p>
<p><a class="btn btn-default" href="#">View details »</a></p>
</div>
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus.</p>
<p><a class="btn btn-default" href="#">View details »</a></p>
</div>
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in.</p>
<p><a class="btn btn-default" href="#">View details »</a></p>
</div>
</div>
</div>