I can't make HTML layout described as in jsFiddle link below, using <div> and CSS float. With table tag I can solve this problem, but I need DIV+CSS solution. It's possible? Anyone can help?
HTML:
<div class="container">
<div class="column">
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
</div>
<div>
Something on top
</div>
<div id="bottom-content" style="background-color: #FA0">
Something with vertical align = bottom AND height == height of left column
</div>
</div>
CSS:
.container {
overflow: hidden;
}
.column {
float: left;
background-color: grey;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
Live demo: jsFiddle
Solution:
HTML:
<div class="container">
<div class="column">
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
</div>
<div style="float:left; height:82px">
Something on top
</div>
<div id="bottom-content" style="background-color: #FA0; float:left;">
Something with vertical align = bottom AND height == height of left column
</div>
</div>
CSS:
.container {
overflow: hidden;
}
.column {
float: left;
background-color: grey;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
The layout(i.e. https://dl.dropbox.com/u/2325784/example_layout.png) can be achieved with the following code I guess:
.container {
width:900px;
overflow: hidden;
}
.picture{
float:left;
width:220px;
}
.column {
width:320px;
float: left;
background-color: grey;
}
& the HTML is:
<div class="container">
<div class="picture">Picture</div>
<div class="column">
<table>
<tr>
<td>Genere</td>
<td>Arcade</td>
</tr>
<tr>
<td>Developer</td>
<td>Micheal A. Denio</td>
</tr>
<tr>
<td>Publisher</td>
<td>Micheal A. Denio</td>
</tr>
<tr>
<td>Released</td>
<td>1988</td>
</tr>
<tr>
<td>Platform</td>
<td>DOS</td>
</tr>
<tr>
<td>Rating 1</td>
<td>Rating Picture will goes here</td>
</tr>
<tr>
<td>Rating 2</td>
<td>Rating2 Pic will goes here</td>
</tr>
</table>
</div>
</div>
If you do not want to use table you can achieve this with ul & li combination.
Cheers!
as i m getting your question.You need to give float on your div
jsfiddle.net/tKnw9/12
check the fiddle
Related
I got this working for Bootstrap 3 but the same code won't work in Bootstrap 4.
Basically, I'm trying to create a horizontal scroll for DIV and here's a working JSFIDDLE for Bootstrap 3 (which I don't want): DEMO
The same code for Bootstrap 4 isn't working though! Here's the JSFiddle for Bootstrap 4: https://jsfiddle.net/6kvw2q5h/
HTML
<div class="live__scroll">
<div class="row text-center">
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
</div>
</div>
CSS
.live__scroll {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.live__scroll .live__scroll--box {
display: inline-block;
float: none;
padding: 15px;
border: 1px solid red;
}
What am I doing wrong? I'm at wits end.
HTML
<div class="container testimonial-group">
<div class="row text-center flex-nowrap">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
<div class="col-sm-4">4</div>
<div class="col-sm-4">5</div>
<div class="col-sm-4">6</div>
<div class="col-sm-4">7</div>
<div class="col-sm-4">8</div>
<div class="col-sm-4">9</div>
</div>
</div>
CSS
/* The heart of the matter */
.testimonial-group > .row {
overflow-x: auto;
white-space: nowrap;
}
.testimonial-group > .row > .col-sm-4 {
display: inline-block;
float: none;
}
/* Decorations */
.col-sm-4 { color: #fff; font-size: 48px; padding-bottom: 20px; padding-top: 18px; }
.col-sm-4:nth-child(3n+1) { background: #c69; }
.col-sm-4:nth-child(3n+2) { background: #9c6; }
.col-sm-4:nth-child(3n+3) { background: #69c; }
NOTE : codepen
I think you need to remove the flexbox functionality of the .row so add:
.live__scroll .row{
display:block;
}
So it should look like the following:
.live__scroll {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.live__scroll .row{
display:block;
}
.live__scroll .live__scroll--box {
display: inline-block;
float: none;
padding: 15px;
border: 1px solid red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="live__scroll">
<div class="row text-center">
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
</div>
</div>
horizontal scoll bar using bootstrap 4
In table
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
<th>Sex</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>bharti</td>
<td>parmar</td>
<td>422</td>
<td>New York</td>
<td>USA</td>
<td>Female</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
</tbody>
</table>
In navigation bar
<div class="scrollmenu">
Home
News
Contact
About
Support
Home
News
Contact
About
Support
Home
News
Contact
About
Support
</div>
css code
div.scrollmenu {
background-color: #333;
overflow: auto;
white-space: nowrap;
}
div.scrollmenu a {
display: inline-block;
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
}
div.scrollmenu a:hover {
background-color: #777;
}
I'm trying to use flexbox to get the same behavior as a table. For example:
<div>
<div class="flex row">
<p>Short text</p>
<p>Text </p>
</div>
<div class="flex row">
<p>Very long text</p>
<p>Text </p>
</div>
</div>
How can I get the rows to be on the same vertical line as a table?
So basically I'm trying to achieve the following result with flexbox
<table>
<tr>
<td>Short text</td>
<td>Text</td>
</tr>
<tr>
<td>Very long text</td>
<td>Text</td>
</tr>
</table>
Not using flexbox given your HTML structure.
If you want table behaviour, using divs, use CSS Tables.
A comparison for you.
table {
border-collapse: collapse;
margin-bottom: 1em;
}
td {
border: 1px solid grey;
padding: 1em;
background: lightgreen;
}
.table {
display: inline-table;
}
.row {
display: table-row;
}
p {
display: table-cell;
padding: 1em;
border: 1px solid grey;
background: lightblue;
}
<table>
<tr>
<td>Short text</td>
<td>Text</td>
</tr>
<tr>
<td>Very long text</td>
<td>Text</td>
</tr>
</table>
<div class="table">
<div class="row">
<p>Short text</p>
<p>Text </p>
</div>
<div class="row">
<p>Very long text</p>
<p>Text </p>
</div>
<div>
.row {
display: flex;
justify-content: space-around;
align-items: center;
}
.row p { width: 100% }
<div class="table">
<div class="flex row">
<p>Short text</p>
<p>Text </p>
</div>
<div class="flex row">
<p>Very long text</p>
<p>Text </p>
</div>
</div>
Hello I'm new to html & css and I have a question. I'm trying to display 4 images in the center of a box next to eacht other. I'm currently using tables but that gives a lot of code in my html & css:
css:
/*box*/
#content2{
margin: 30px 0;
background: white;
padding: 20px;
clear: both;
box-shadow: 0px 1px 1px #999;
text-align: center;
overflow:hidden;
}
/*table*/
table{
margin-right: auto;
margin-left: auto;
display: inline-block;
}
td,th{
padding: 20px;
}
and then way to much html:
<div id="content2">
<h4>Onze producten</h4>
<table>
<tr>
<td> Pika deken</td>
</tr>
<tr>
<td><img src="../images/baby1.jpg"></td>
</tr>
<tr>
<td>€20</td>
</tr>
</table>
<table>
<tr>
<td>School outfit</td>
</tr>
<tr>
<td><img src="../images/boy1.jpg"></td>
</tr>
<tr>
<td>€140</td>
</tr>
</table>
<table>
<tr>
<td>Bussines girl</td>
</tr>
<tr>
<td><img src="../images/girl2.jpg"></td>
</tr>
<tr>
<td>€250</td>
</tr>
</table>
<table>
<tr>
<td>Summer</td>
</tr>
<tr>
<td><img src="../images/girl1.jpg"></td>
</tr>
<tr>
<td>€99.99</td>
</tr>
</table>
</div>
Is there any way to do this more effciently ?
The design has to stay liquid.
Thanks in advance
max. simplified (ok, we could use img captions, too)
http://jsfiddle.net/EpyUb/
HTML
<div id="content2">
<h4>Onze producten</h4>
<div class="container">
<div class="product">
School outfit
<img src="../images/boy1.jpg">
</div>
<div class="product">
School outfit
<img src="../images/boy1.jpg">
</div>
<div class="product">
School outfit
<img src="../images/boy1.jpg">
</div>
<div class="product">
School outfit
<img src="../images/boy1.jpg">
</div>
</div>
</div>
CSS
.product {display: inline-block;}
.product img {display: block;}
You can try something like this:
<div id="content2">
<h4>Onze producten</h4>
<div class="section">
Pika deken
<img src="../images/baby1.jpg" />
€20
</div>
<div class="section">
School outfit
<img src="../images/boy1.jpg" />
€140
</div>
<div class="section">
Bussines girl
<img src="../images/girl2.jpg" />
€250
</div>
<div class="section">
Summer
<img src="../images/girl1.jpg" />
€99.99
</div>
</div>
and css:
#content2{
margin: 30px auto;
background: white;
padding: 20px;
clear: both;
box-shadow: 0px 1px 1px #999;
text-align: center;
overflow:hidden;
}
.section {
display: inline-block;
margin: 0 10px;
}
.section a {
display: block;
padding-bottom: 10px;
}
example here:
http://jsfiddle.net/thespacebean/xGqDE/
Okay so I've been trying to position these 4 divs for about 6 hours now. The routes box is suppose to take up whatever height is left between the navigation and info divs, wasn't quite sure how to say that. If someone could help me out or point me in the right direction I would really appreciate it.
http://i.stack.imgur.com/41q3H.png
current code is at 98.214.131.200/new.php & 98.214.131.200/defualt.css
<div>
<div style="background-Color:black;height:35px"></div>
<div style="width:30%;float:left;height:500px">
<div style="height:50%;background-color:green;width:100%"></div>
<div style="height:50%;background-color:blue;width:100%"></div>
</div>
<div style="width:70%;float:right;height:500px;background-color:red"></div>
</div>
set the height:350px; of class .routes it may help you.
As Below:
.routes {
background: none repeat scroll 0 0 #0000FF;
height: 350px;
width: 300px;
}
JSFIDDLE:http://jsfiddle.net/beABW/
<div class="navigation"></div>
<div class="content">
<div class="firstCol">
<div class="routes"></div>
<div class="info"></div>
</div>
<div class="secondCol">
<div class="google_map"></div>
</div>
</div>
In your style.css
.navigation{
height:35px;
width:100%;
}
.content{
width:100%;
}
.firstCol{
float:left;
width:300px;
height:auto;
}
.routes{
width:300px
height:auto;
}
.info{
width:300px
height:200px;
}
.secondCol{
float:left;
width:auto;
height:auto;
}
.google_map{
width:auto;
height:auto;
}
Assuming you do not know the height initially you will need to do this programmatically by getting the height of Google Map minus the height of info and then setting routes to that height. Example here. Or you can use a table :-(
.class1
{
float:left;
}
#one
{
height:35px;
width:100%;
border:1px solid red;
}
#two
{
height:200px;
width:300px;
border:1px solid red;
}
#three {
border: 1px solid Green;
height: 403px;
}
#four
{
height:200px;
width:300px;
border:1px solid red;
}
#lftpanel {
float: left;
width: 300px;
}
#rgtpanel {
float: left;
width: 808px;
}
<div id="mainDIv">
<div id="one" class="class1">
</div>
<div id="lftpanel">
<div id="two" class="class1">
</div>
<div id="four" class="class1">
</div>
</div>
<div id="rgtpanel">
<div id="three" class="class1">
</div>
</div>
</div>
Here's an example for a table solution (not very W3C but the solution will work in older browsers, too) :
<table width="100%" cellpadding="0" cellspacing="0" border="1">
<tr>
<td colspan="2">Header
</td>
</tr>
<tr>
<td width="300px">
<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="1">
<tr>
<td width="100%">topleft</td>
</tr>
<tr>
<td width="100%" height="200px">bottomleft</td>
</tr>
</table>
</td>
<td height="1000px">right</td>
</tr>
</table>
I tried this before, but doesn't work:
<table width="100%" cellpadding="0" cellspacing="0" border="1">
<tr>
<td colspan="2">Header
</td>
</tr>
<tr>
<td width="300px">topleft</td>
<td rowspan="2">right</td>
</tr>
<tr>
<td width="300px" height="200px">bottomleft</td>
</tr>
</table>
Using flex-boxes may be what you are after. Flex-boxes can be used to stretch/grow a div to fill it's parent while taking into account other children of it's parent. I have an example here of it doing what I believe your asking for.
Note: I'm not sure what browser versions this works in.
I edited khurram's answer, the trick is, float everything and to take up whatever space is left use overflow:hidden (no float!)
Edit:
http://jsfiddle.net/hashie5/v4jFr/
I have a pretty common layout issue that I have traditionally used a table to solve, but would like some advice on getting it done with CSS. I have 3 images that makeup a 'container'. The left and right images are usually just shown using tags, and the center image is displayed as a 'background-image" with my content over it, so that the content appears to be in the container. I'm sure you've seen/used this a million times:
<table width="100" cellpadding="0"><tr>
<td width="50"><img src="myleftimage" /></td>
<td style="background: url('mymiddleimage');">Content goes here...</td>
<td width="50"><img src="myrightimage" /></td>
</tr></table>
The nice thing about this is that the width of the table is always the width of the browser (or parent) and the middle column where the content is dynamically sizes to take up the remaining space between the left/right images.
What I want to is recreate this using CSS, with as little hard coded info as possible. So something like this:
<div style="float:left; width:100%">
<div style="width: 50px;float:left;"><img src="myleftimage" /></div>
<div style="background: url('mymiddleimage');float:left;width:???">Content goes here...</div>
<div style="width: 50px;float:left;"><img src="myrightimage" /></div>
</div>
This works great accept for the middle div -how do I set the width? Right now I can hard-code it to be, say, 92%, etc. But want I want is for it to auto-fill the space. Can it be done using only CSS?
try
<div style="width:100%;">
<div style="width:50px; float: left;"><img src="myleftimage" /></div>
<div style="width:50px; float: right;"><img src="myrightimage" /></div>
<div style="display:block; margin-left:auto; margin-right: auto;">Content Goes Here</div>
</div>
or
<div style="width:100%; border:2px solid #dadada;">
<div style="width:50px; float: left;"><img src="myleftimage" /></div>
<div style="width:50px; float: right;"><img src="myrightimage" /></div>
<div style="display:block; margin-left:auto; margin-right: auto;">Content Goes Here</div>
<div style="clear:both"></div>
</div>
This will do what you want. Fixed sides with 50px-width, and the content fills the remaining area.
<div style="width:100%;">
<div style="width: 50px; float: left;">Left Side</div>
<div style="width: 50px; float: right;">Right Side</div>
<div style="margin-left: 50px; margin-right: 50px;">Content Goes Here</div>
</div>
Or, if you know the width of the two "side" images and don't want to deal with floats:
<div class="container">
<div class="left-panel"><img src="myleftimage" /></div>
<div class="center-panel">Content goes here...</div>
<div class="right-panel"><img src="myrightimage" /></div>
</div>
CSS:
.container {
position:relative;
padding-left:50px;
padding-right:50px;
}
.container .left-panel {
width: 50px;
position:absolute;
left:0px;
top:0px;
}
.container .right-panel {
width: 50px;
position:absolute;
right:0px;
top:0px;
}
.container .center-panel {
background: url('mymiddleimage');
}
Notes:
Position:relative on the parent div is used to make absolutely positioned children position themselves relative to that node.
making a dynamycal width with mobile devices support
http://www.codeography.com/2011/06/14/dynamic-fixed-width-layout-with-css.html