I'm trying to replace some layouts table layouts with css layouts and have this code:
<html>
<head>
<style type="text/css">
#grid{
border:solid;
border-width:1px;
border-color:#000000;
width:300px;
max-width:300px;
min-width:300px;
overflow:hidden;
font-size:14px;
}
#grid .item{
text-align:center;
width:33%;
margin-top:2px;
margin-bottom:2px;
float:left;
}
</style>
</head>
<body>
<div id="wagerStream">
<div id="grid">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item5</div>
<div class="item">item6</div>
<div class="item">item7</div>
<div class="item">item8</div>
<div class="item">item9</div>
</div>
<div id="grid">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4 with wrapping text</div>
<div class="item">item5</div>
<div class="item">item6</div>
<div class="item">item7</div>
<div class="item">item8</div>
<div class="item">item9</div>
</div>
</div>
</body>
</html>
As you can see I have a problem with the way the last three items display when wrapping text occurs and would to know what would be a good css solution.
set additional two styles on item class:
white-space: nowrap;
overflow: hidden;
That should do the trick.
You will need to specify a height to the .item. Because floating elements always set their height to the minimum they need.
So, add the following line to your .item
height:<amount>px;
The only solution I could think of without using JavaScript and without specifying a set height to your items, is to wrap every 3 items in a row.
<div id="grid">
<div class="item-row">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
</div>
<div class="item-row">
<div class="item">item4 with wrapping text</div>
<div class="item">item5</div>
<div class="item">item6</div>
</div>
<div class="item-row">
<div class="item">item7</div>
<div class="item">item8</div>
<div class="item">item9</div>
</div>
</div>
You'd want to have overflow:hidden applied to item-row to contain the floated items.
Related
I have seen a lot posts about this, I know it's simple but I cannot get my example to work and I would like to understand why as I still did not grasp the concept of positioning in CSS.
I am using simple bootstrap in my App. I have a container with row and col-md-6. My code looks like this.
<section id="automat" class="box bg-light-grey">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<img src="images/iPod.png" class="scaleImage"/>
</div>
</div>
</div>
</section>
And my custom css style for image looks like this (depending on screen size I will control the size of img element).
.scaleImage {
width:300px;
height:auto;
position:relative;
margin:0 auto;
}
As you can see, I have tried to set the exact width of my element, with position:relative and margin:0 auto. According to the other posts, this is supposed to be enough to center my element inside my container, but it's not. It is still locked on the very left side of my col-md-6 container.
My question is following: Why my solution is not working and how do I need to change my code to get this to work?
Is this working?
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 text-center">
<img src="images/iPod.png" class="scaleImage" style="width:100%;height:100%"/>
</div>
<div class="col-md-3"></div>
</div>
</div>
You can try like this,
section{
background: gray;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="automat" class="box bg-light-grey">
<div class="container text-center">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<img src="https://www.sfu.ca/content/sfu/publicsquare/_jcr_content/below-nav/parsys/image.img.jpg/1406566003083.jpg" class="scaleImage" />
</div>
</div>
</div>
</section>
You can use bootstrap class 'text-center' to center. So, you do not need to use margin:0 auto.
Here you have defined an offset too. You do not need offset to center a div.
.scaleImage {
width:300px;
height:auto;
position:relative;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="automat" class="box bg-light-grey">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<img src="https://d3nevzfk7ii3be.cloudfront.net/igi/tcbxa1Eb6YMETIW2.large" class="scaleImage"/>
</div>
</div>
</div>
</section>
margin: 0 auto would not work because image is inline-block element (look: Why doesn't margin:auto center an image?)
To align image do text-align: center on parent div or <div class="container text-center">.
try to add one more class, text-center to col-md-6. It will center align the content.
position:relative;
float:none;
width:100%;
max-width:300px;
margin:auto;
DISPLAY:BLOCK
so to center your element in the middle you need this combination of css properties
I am having trouble to put in horizontal lines between 2 images. Not sure how to go about doing this as I have just started learning Bootstrap.
I would like to achieve like the below image:
http://i.stack.imgur.com/9vJdm.png
Just have a look at this code will be useful for you
<style>
img{
width:10%;
display:inline-block;
}
.col-lg-5, .col-lg-2{
padding-left:0px;
padding-right: 0px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-5" style="text-align:right">
<img src="path/img1.jpg">
</div>
<div class="col-lg-2">
<hr>
</div>
<div class="col-lg-5">
<img src="path/img2.jpg">
</div>
</div>
</div>
</body>
Based on the size of the image(default) you can change width and col-lg-, col-md-, col-sm-, col-xs- values and also CSS. Its working fine for me.
Would it be possible to achieve the attached grid in bootstrap? Each of the squares would probably be an image... or perhaps text!
I've had a go, but hit a wall when it comes to the top-left box for example that spans over two rows.
Grid:
Use nested blocks whenever you need your grid to span several rows.
Something like this:
<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
</div>
<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
</div>
</div>
<div class="col-sm-8">
<div class="row">
<div class="col-sm-8"></div>
<div class="col-sm-4"></div>
</div>
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-8"></div>
</div>
</div>
<div class="col-sm-4"></div>
</div>
Then you can set the height for your blocks and your grid is good to go.
A newbie here.
So I was learning to make nested grids when I stumble on this question.
My Rules for making nested grids:
1.The entire grid will be in parent container .row (parent wrapper)
2.Columns are always nested in columns, however all nested columns must have a .row(column wrapper) wrapper to align items horizontally e.g.:
<div class='col-md-12'>
<div class='row'>This is the column wrapper.
<div class='col-md-9'></div>
<div class='col-md-3'></div>
</div>
</div>
3.Breakpoints are very key
4.You may have to use custom css to fine tune your grid.
This is my solution to the problem:
<div class='row parent-wrap'>
<div class='col-sm-6 big-left'>Top Left big</div>
<div class='col-sm-6 quarter-grid'>
<div class='row top-wrap'>
<div class='col-sm-6 top-left'>top-left</div>
<div class='col-sm-6 top-right'>top-right</div>
<div class='col-sm-6 bottom-left'>bottom-left</div>
<div class='col-sm-6 bottom-right'>bottom-right</div>
</div>
</div>
<div class='col-sm-12'>
<div class='row mid-wrap'>
<div class='col-sm-3 mid-start'>mid-start</div>
<div class='col-sm-6 mid-center'>mid-center</div>
<div class='col-sm-3 mid-end'>mid-end</div>
</div>
<div class='col-sm-9'>
<div class='row bottom-wrap'>
<div class='col-sm-8 bottom-start'>bottom-start</div>
<div class='col-sm-4 bottom-center'>bottom-center</div>
</div>
</div>
</div>
Rudimentary custom css:
.parent-wrap{
margin:100px;
}
.big-left{
background-color: aqua;
height:300px;
}
.top-left{
background-color:black;
height:150px;
}
.top-right{
background-color: blue;
height:150px;
}
.bottom-left{
background-color:brown;
height:150px;
}
.bottom-right{
background-color:crimson;
height:150;
}
.mid-start{
background-color:grey;
height:200px;
}
.mid-center{
background-color: red;
height:200px;
}
.mid-end{
background-color: pink;
height:400px;
}
.bottom-start{
background-color:blueviolet;
margin-left:-15px;
height:200px;
margin-top:-200px;
}
.bottom-center{
background-color:burlywood;
height:200px;
margin-top:-200px;
}
Here's the jsFiddle: http://jsfiddle.net/RkMFK/
Here's the html and css:
<div class="cont">
<div class="item">one</div>
<div class="item">two</div>
<div class="item">three</div>
<div class="item">four</div>
<div class="item">five</div>
<div class="item">six</div>
<div class="item">seven</div>
<div class="item">eight</div>
<div class="item">nine</div>
<div class="item">ten</div>
<div class="item">eleven</div>
<div class="item">twelve</div>
<div class="item">thirteen</div>
<div class="item">fourteen</div>
<div class="item">fifteen</div>
<div class="item">sixteen</div>
<div class="item">seventeen</div>
<div class="item">eighteen</div>
<div class="island"></div>
</div>
.cont {
width: 240px;
height: 160px;
background-color:blue;
position:relative;
overflow:hidden;
}
.island {
position:absolute;
top:50px;
left:80px;
width:40px;
height:40px;
background-color:red;
}
.item {
float:left;
display:inline;
position:relative;
height:20px;
margin:2px;
padding: 0 10px;
background-color:yellow;
overflow:hidden;
}
How can I make the yellow items flow around the red "island" with css?
Summary: I have a container div of a fixed dimension. Somewhere within it is a small "island" div at a specific location (currently positioned absolutely, which removes it from the flow). How can I fill the container with a number of small elements of unknown width that surround the island? Any way to do this with css only? I'm stuck.
May be you want some what like in this fiddle . If i am lagging some where please let me know. so i can work out..
code:html
<div class="cont">
<div class="island"></div>
<div class="item">one</div>
<div class="item">two</div>
<div class="item">three</div>
<div class="item">four</div>
<div class="item">five</div>
<div class="item">six</div>
<div class="item">seven</div>
<div class="item">eight</div>
<div class="item">nine</div>
<div class="item">ten</div>
<div style="margin:0 20px" class="item">eleven</div>
<div style="margin:0 25px" class="item">twelve</div>
<div class="item">thirteen</div>
<div style="margin-left:58px;" class="item">fourteen</div>
<div class="item">fifteen</div>
<div class="item">sixteen</div>
<div class="item">seventeen</div>
<div class="item">eighteen</div>
</div>
I have a question about css clear float.
My question is when I declare div{float:left;} to all the page, then in some part, I still want some div display center of the screen, like width:960px;margin:0 auto. How to clear this div's float?
see code in: http://jsfiddle.net/37wnT/ and review in http://jsfiddle.net/37wnT/show/
I need div#nav and div#content these two div center of the screen, but other div still obey the rule float:left;
I have modified your code little bit. take a look.
<html>
<head>
<style>
div.main{float:left;}
#header{width:100%;height:100px;}
#nav{clear:both;width:800px;margin:0 auto;}
.nav{width:200px;text-align:center;font:16px/150%;}
#wrap{width:100%;height:100%;}
#content{clear:both !important;width:960px;height:100%;margin:0 auto;}
.col{width:300px;height:300px;margin:0 10px 0 10px;background:red;display:block;}
</style>
</head>
<body>
<div id="header">
<div id="nav">
<div class="nav main">home</div>
<div class="nav main">info</div>
<div class="nav main">products</div>
<div class="nav main">cantact</div>
</div>
</div>
<div id="wrap">
<div id="content">
<div class="col main" >ds</div>
<div class="col main">ds</div>
<div class="col main">ds</div>
</div>
</div>
</body>
</html>
This is the new jsfiddle
<div id="content">
<div class="col">1</div>
<div class="col" >2</div>
<div class="col" style="clear:left;margin-top:10px">3</div><br> <-- changes here
</div>
I am not sure if this is what you want.