It seems like it should be simple, but I'm having trouble achieving this layout. It's a set of two columns using CSS display:table-cell. The right column has a responsive image that should set the height for both. The left column has text that should scroll if needed. Please see the JSFiddle: http://jsfiddle.net/xThB7/
<div class="details-wrap">
<div class="details">
<div class="scroll">
Lorem ipsum
</div>
</div>
<div class="details-image">
<img src="http://lorempixel.com/output/city-q-c-640-480-6.jpg" />
</div>
</div>
I'm open to any solutions, although I'd like to avoid using JS
You just need to add height: 100% to .details and .scroll class:
.details {
display:table-cell;
vertical-align:top;
width:50%;
background:#ccc;
line-height:1.5em;
height: 100%;
}
.scroll {
padding:15px;
overflow:auto;
height: 100%;
}
fiddle: http://jsfiddle.net/xThB7/2/
Related
I have a bootstrap 3 page with a centered box which contains content.
If the content grows the box stays static and doesn't grows with my content but the bootstrap container grows.
I don't know why the "box" did'nt expand. I tried "position:relative" and "overflow:hidden" but it doesn't work.
I tried also "container-fluid" - no reaction.
My CSS-Stylesheet:
html,
body {
height:100%;
width:100%;
}
.container {
height:100%;
min-height:100%;
}
.row {
height:100%;
min-height:100%;
}
.box {
height:90%;
min-height:90%;
max-width:1100px;
background-color:rgba(0,0,0,0.83);
text-align:left;
padding-left:5%;
padding-right:5%;
padding-top:1%;
overflow:hidde;
position: relative;
}
HTML:
<div class="container">
<div class="row">
<div class="box">
<div class="col-xs-12">
</div>
</div>
</div>
</div>
You have hardcoded the height of you box, thats why it doesnt grow as more content comes in. You have to set the height to auto. And if you want that the box has a minimum height while not so much content is present just use an additional min-height: 100vh;
.box {
height:auto;
min-height: 100vh;
/* etc.
}
See working Fiddle
Since you are using bootstrap, try to make like this
<div class="container">
<div class="row">
<div class="col-md-12 box">
<div class="col-xs-12">
</div>
</div>
</div>
and then make the height like:
.box
{
height: 100%;
}
I'm using the twitter bootstrap and I am having a hard time figuring out how to separate the background color of two columns that are inside of a main container div, yet have it go full-width.
Here is a fiddle of what I have so far: http://jsfiddle.net/seeplanet/ZTbwz/
My main problem is that I want to have the two columns centered on the page and not extending to either side. That is why I have the max-width set on the container.
My HTML:
<div id="featured-content">
<div class="container">
<div class="row">
<div class="col-sm-9">
Featured Video or Image Gallery
</div>
<div class="col-sm-3">
Other Information
</div>
</div>
</div>
</div>
My CSS:
#featured-content {
background-color: #c7591f;
padding: 20px 0px;
}
.container {
max-width: 960px;
margin:0 auto;
}
.col-sm-9{
width:75%;
float:left;
background:yellow;
}
.col-sm-3{
width:25%;
float:left;
}
}
And this is what I would like it to look like:
Add display:table; to your container like this:
.container {
max-width: 360px; /* If I remove this, then it works, but then my content is not centered */
margin:0 auto;
display:table;
}
JS Fiddle
http://jsfiddle.net/grrenier/3TE4X/1/
Try this other JS Fiddle:
http://jsfiddle.net/grrenier/3TE4X/2/
I am trying to make a series of DIV elements sit side by side. Howeever i am running into problems
HTML:
<div id="comic" class="comic">
<div class="comic_panel">1</div>
<div class="comic_panel">2</div>
<div class="comic_panel">3</div>
<div class="comic_panel">4</div>
<div class="comic_panel">5</div>
<div class="comic_panel">6</div>
<div class="comic_panel">7</div>
<div class="comic_panel">8</div>
<div class="comic_panel">9</div>
<div class="comic_panel">10</div>
<div class="comic_panel">11</div>
<div class="comic_panel">12</div>
<div class="comic_panel">13</div>
<div class="comic_panel">14</div>
</div>
CSS:
#comic{
height: 563px;
width: 1000px;
background: black;
margin: auto;
color:white;
position:relative;
overflow:auto;
}
.comic_panel{
width:1000px;
height:563px;
position:relative;
float:left;
background:orange;
}
However the result I get is simply the DIVS displaying under neath one another.
Your divs are too wide to fit side by side in the container. Try giving them a width of 200px:
.comic_panel{
width:200px;
height:563px;
position:relative;
float:left;
background:orange;
}
If you want for a scroll bar to appear, use white-space:nowrap; on the container and display:inline-block on the children.
Here is a demonstration: http://jsfiddle.net/h2StP/show
Change the CSS to below,
.comic_panel{
width:6%;
height:563px;
position:relative;
float:left;
background:orange;
border:1px solid red;
}
and they should fall side by side.
Basically child divs have same width as parent , so there is no room for them to sit side by side.
DEMO
The reason is that each inner divs (.comic_panel) are using all the width of the parent container (#comic). Then, the next div can only be place right below the previous one.
If you tune up the widths, you can have your result.
For example, if you let the container div have any width, you would have all the inner divs side by side: http://jsfiddle.net/
body {
width: auto;
overflow: auto;
width: 10000px;
}
#comic{
height: 563px;
background: black;
margin: auto;
color:white;
overflow: visible;
}
.comic_panel{
border: 1px solid black;
width:100px;
height:63px;
float:left;
background:orange;
}
To make the inner divs not wrap, you need to either set the width of the body element to a proper value (to make space for all the inner divs) via a hard-coded width css property (as in the fiddle, but not the best approach) or via javascript (a better approach).
This post explains other approaches, using tables: http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/.
BTW, you may not need the position: relative that you put there to achieve this effect.
Put the whole thing into a container div like this:
<div id="container">
<div id="comic" class="comic">
<div class="comic_panel">1</div>
<div class="comic_panel">2</div>
<div class="comic_panel">3</div>
<div class="comic_panel">4</div>
<div class="comic_panel">5</div>
<div class="comic_panel">6</div>
<div class="comic_panel">7</div>
<div class="comic_panel">8</div>
<div class="comic_panel">9</div>
<div class="comic_panel">10</div>
<div class="comic_panel">11</div>
<div class="comic_panel">12</div>
<div class="comic_panel">13</div>
<div class="comic_panel">14</div>
</div>
</div>
The container div should be the same size as your 'comic' div was before:
#container {
height: 563px;
width: 1000px;
overflow: auto;
}
And the width of your 'comic' div should be 14000.
#comic{
height: 563px;
width: 14000px;
background: black;
margin: auto;
color:white;
position:relative;
overflow:auto;
}
I am quite new to css and html, and I am having trouble floating divs within a another div,
I've done quite a bit of research online but have not been able to come up with a solution.
these are the sites I have read and where of no use:
barelyfitz /screencast/html-training/css/positioning/
stackoverflow /questions/580195/css-layout-2-column-fixed-fluid
mirificampress /show.php?id=106
How to get Floating DIVs inside fixed-width DIV to continue horizontally?
My code can be found on jsFiddle here
I hope this will help.
CSS:
#left, #right {
width: 100px; //change this to whatever required
float: left;
}
HTML :
<div id="wrapper">
<div id="left">
<p class="t0">lorum itsum left</p>
<div>
<div id="right">
<p class="t0">lorum itsum right</p>
<div>
<div>
Like this?
http://jsfiddle.net/Ev474/
<div id="wrapper">
<div id="inner">
<div id="left">
Left Content
</div>
<div id="right">
Right Content
</div>
</div>
</div>
div {
height: 50px;
}
#wrapper {
width: 200px;
overflow-x: auto;
overflow-y: hidden;
background-color: #ccc;
}
#inner {
width: 400px;
}
#left {
width: 150px;
float: left;
background-color: #f00;
}
#right {
width: 150px;
float: left;
background-color: #0f0;
}
Since you are a beginner. I will make it straight forward. Below is extraction of your code. I used internal style sheet. Your example you are using external style sheet.
Using float attribute you can set it to left and right. Here is used float:left to alight one div to left and float:right to alight other one to the right.
Each opened tag has to be closed tag.
<head>
</head>
<!--Internal style sheet-->
<style>
.left{
float:left;
}
.right{
float:right;
}
</style>
<body>
<div id="wrapper" >
<div class="left">
<p class="t0">lorum itsum left</p>
</div>
<div class="right">
<p class="t0">lorum itsum right</p>
</div>
</div>
</body>
</html>
Additional note: If you want to adjust the size of left and right div then use width in style sheet. Refer the updated style sheet below. I made left div width to 80% of the screen width and right width to 20%.(total should be 100%). Adjust accordingly.Background color used to set the background color of the div.
.left{
float:left;
background-color:powderblue;
width:80%;
}
.right{
float:right;
width:20%;
background-color:yellow;
}
Look at the example:
<td>
<div id='a'></div>
<div id='b'></div>
</td>
I want div#a to be floated to left, div#b floated to right, and both of them to be vertically aligned. How to do that?
Example: https://usosweb.mimuw.edu.pl/kontroler.php?_action=actionx:katalog2/index()
Use one of the input texts, and look at the footnote of autocompleter. I want to get similar effect but both "column" to be vertically aligned to MIDDLE (apologise for lack of that).
I think this is what you are asking for: I made a demo here: http://jsfiddle.net/RK2ak/
<div class="wrap">
<p id="a"> test</p>
<p id="b"> test</p>
</div>
#a{
float:left;
}
#b{
float:right;
}
.wrap{
width:300px;
}
Its hard to answer when you dont say anything about what you are actually trying to do.
The following does no good, but it answers your question:
<div>
<div id="a">a</div>
<div id="b">b</div>
</div>
<style>
div { width: 100px }
#a{ background: red; float:left }
#b{ background: blue; float:right }
</style>
EDIT
Based on your update, what you need is line-height:
<div id="container">
<div id="a">
<p>lorem ipsum whatever</p>
</div>
<div id="b">
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</div>
</div>
<style>
#container { width: 500px }
#a,#b{ display: block; float:left; width: 240px; background: red; line-height: 35px; height:35px }
p{ line-height: 1em; display: inline-block; }
</style>
This updated Fiddle illustrates the concept. Basically, the containers need a height and a line-height, so that height = line-height.
It sounds like you want both divs to be vertically centered, with one on the left and one on the right. Vertical alignment has always been tricky with CSS, and while there are now a few simple and elegant solutions, they were only introduced recently and thus are not yet very compatible. The traditional alternative is to use tables, but we can avoid that if you know how tall your <div>s are going to be.
Here's an example layout that assumes #left and #right are always 100px tall, and aligns them relative to the document body. (fiddle)
HTML
<body>
<div id='pad'></div>
<div id='left'>left</div>
<div id='right'>right</div>
</body>
CSS
* {margin:0; padding:0;}
body {position:absolute; width:100%; height:100%;}
#pad {height:50%; min-height:50px; margin-bottom:-50px;}
#left {float:left; width:100px; height:100px; background:#f88;}
#right {float:right; width:100px; height:100px; background:#88f;}