I am trying to align a row of divs horizontally within a div fluidly. When the container div contracts the inner divs (which will be actually be images within divs) will push next to each other. I have created a fiddle and the problem I am having is that the inner divs do not move closer when the div is shrunk. I have tried using %'s and numerous other ways to fix this but am new to working with %'s as apposed to px. In my example the container div is fluid but the red inner divs are not! How do i make the inner divs fluid? Here is the
fiddle
And the code:
<html>
<head>
<title>Alignment</title>
<style type="text/css">
.container{position: relative; margin: 0px auto; border: 1px solid black; width: 100%; max-width: 500px;}
li{display: inline-block; margin-left: 25px;}
ul,li{list-style: none;}
.box{width: 100px; height: 100px; border: 1px solid red;}
</style>
</head>
<body>
<div class="container">
<ul>
<li><div class="box"></div></li>
<li><div class="box"></div></li>
<li><div class="box"></div></li>
<div style="clear: both"></div>
</ul>
</div>
<p>When the right side of the container div hits the red box I want the boxes to be pushed left against each other until they
reach the left side of the container div.</p>
</body>
</html>
Try giving width to the elements in %. For eg: try adding the below codes to your stylesheet
li{
display: inline-block;
margin-left: 5%;
width:25%;
}
.box{
width: 100%;
height: 100px;
border: 1px solid red;
}
Try this:
.container{
text-align: center;
}
ul,li{
padding: 0;
}
li{
display: inline-block;
margin-left: 25px;
}
li:first-child{
margin-left: 0;
}
Demo
Related
I tried to add magin-top to a div style .. but it's not working
Here is the code
.side {
margin-left: 65%;
margin-top: 3%;
margin-right: 3%;
border: 1px solid;
}
.home {
margin-left: 3%;
margin-top: 3%;
width: 62%;
border: 1px solid;
float: left;
}
.home h1 {
margin-top: 0;
}
.side h1 {
margin-top: 0;
}
<div class="home">
<h1>Home</h1>
<p>Just a template.</p>
</div>
<div class="side">
<h1>Widget Header</h1>
<hr>
<p>Widget content.</p>
</div>
I expect the "side" div to be at the same line with "home" div
When you assign float:left to an element,the element shifts to that direction and the other elements gets wrapped around it.If you inspect the page, you can see that .side covers the total width of the page and .home is sitting just over it.To make .side align with .home,minimise both the width of .home and the left margin of .side so that both of the div can be accomodated with the width of the page.Next apply float:left to .side, so that it can get aligned with .home . Here's a working solution:-
<html>
<head>
<style>
.home {
margin-left: 3%;
margin-top: 3%;
width: 50%;
border: 1px solid;
float: left;
}
.side {
margin-left:5%;
margin-top: 3%;
margin-right: 3%;
float:left;
border: 1px solid;
}
</style>
</head>
<body>
<div class="home">
<h1>Home</h1>
<p>Just a template.</p>
</div>
<div class="side">
<h1>Widget Header</h1>
<hr>
<p>Widget content.</p>
</div>
</body>
</html>
Here is a link of a video that will give you a clear understanding about floats: https://www.youtube.com/watch?v=xara4Z1b18I
is this what you want? check here. if so, remove margin-top from .home
i need it to be like this .. http://imgur.com/tIUgEc1
when i remove margin-top and add padding-top i get this .. http://imgur.com/ThaHHUu
Use:
* {
box-sizing: border-box;
}
.home {
margin-top: 0;
//more code....
}
The problem is that you are using percentages for your margin-top properties (what exactly is 3% a percentage of?). You should instead consider using absolute pixel values, or wrap your two columns in another container for which would have a single unified margin-top.
On a side note (pardon the pun) your side element should also float: right if you wish it to carry out the same behaviour as home. Removing margin-left and setting a width will make it sit correctly beside the home column.
Koda
Im trying to use margin: auto; at the same time as i'm using the display: inline-block; css. Before i'm putting in the inline-block code it worked fine and the div was centered using margin auto. But now its not working anymore.
I want the Divs logo and contact_info to be inline and the div .inner to be centered.
.inner {
width: 80%;
display: inline-block;
margin: auto;
padding-top: 40px;
padding-bottom: 40px;
}
.logo {
float: left;
}
.contact_info {
float: right;
}
HTML CODE
<div class="inner"> <!-- Top header -->
<div class="logo">
Logga här
</div>
<div class="contact_info">
<h4> Vikbo Bil & Motor AB </h4>
<p> Ekkällavägen 6 </p>
<p> 610 24 Vikbolandet </p>
<p> 0125 500 71 </p>
</div>
</div>
Remove inline-block from .inner class.
display: inline-block;
makes an element well..inline. meaning it only takes as much space as it's width, and allows other inline elements to take the remaining space in the page if they can fit in.
what you want, is to create the .inner div a block element, which, even though there might be extra space after the div has taken the space for it's own width, won't let any other element take up that space. meaning, it'll be the only element in that row.
so you can use margin: auto to make it center.
I see you've used float placement on logo and contact_info meaning they'll not be fitting in the div.inner. you should use display: inline-block on these divs, so they inline and inside the div.inner.
see if this fiddle satisfies all your needs?
Just remove the inline-block property on your "inner" div :
.inner {
width: 80%;
margin: auto;
padding-top: 0;
padding-bottom: 40px;
background: blue;
}
.logo {
float: left;
background: red;
}
.contact_info {
float: right;
background: green;
}
<div class="container">
<div class="logo">logo</div>
<div class="contact_info">contact_info</div>
<div class="inner">inner</div>
</div>
You can do problem solve using this code
.inner{
width:100%
margin:0 auto;
display: block;
height: 100px;
}
.logo{
display:inline-block;
width:auto;
}
.contact_info{
display:inline-block;
width:auto;
}
I'm trying to make a divider for my page, usign three divs with different colors to form a single line with a height of 2px. I am creating a div with 3 subdivs, each with a height of 2 px.The parent div is inexplicably taking a space of 18px, I thought the parent div should only occupy the space of his children.
Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body style="margin: 0; padding: 0">
<div class="separator">
<span class="third t1"></span><!--
--><div class="third t2"></div><!--
--><div class="third t3"></div>
</div>
</body>
</html>
And my CSS:
.separator {
height: 2px;
width: 100%;
}
.third {
height: 2px;
margin-top: -10px;
width: 33.33%;
display: inline-block;
}
.t1 {
background-color: #ff7474;
}
.t2 {
background-color: #f1f58d;
}
.t3 {
background-color: #72baf1;
}
Here is the codepen.io link for my code:
http://codepen.io/anon/pen/vjdnx
Your problem is that because you are using inline block the separator div is using the font size to determine it's height and the line-height of the child elements.
First you need to comment out all of the white space (as display:inline-block will treat the elements like words in a sentence so white spaces will show up between them):
<div class="separator"><!--
--><span class="third t1"></span><!--
--><div class="third t2"></div><!--
--><div class="third t3"></div><!--
--></div>
then you need to add the following style to your separator div:
.separator {
height: 2px;
width: 100%;
font-size:2px;
}
Example
JsFiddle
Just add float:left; to .third class. It's one way to get rid of the space that display:inline-block creates. I've also removed margin-top:-10px (else you cannot see the elements)
Before
.third {
height: 2px;
margin-top: -10px;
width: 33.33%;
display: inline-block;
}
After
.third {
float:left;
height: 2px;
width: 33.33%;
display: inline-block;
}
Remeber : Floating elements needs a parent with overflow:hidden or an element with clear:both after them.
I have 3 div blocks inside another div.
What I wanted to do is to put them inline, but the first 2 div blocks should take a width according to their content and the last div take the remaining space.
<div class="container">
<div class="red">Red</div>
<div class="green">Green</div>
<div class="blue">Blue</div>
</div>
I try to avoid the use of fixed widths because I need to use this in a responsive design.
How can I make the blue div in this fiddle take the rest available space of its parent and act responsive if the screen is resized?
float: left the red and green and the blue get width: clac(100% - 100px)
.blue {
width: calc(100% - 100px);
}
http://jsfiddle.net/6kLVn/190/
I believe if you don't want to specify any pixel or percentage widths at all and make the red and green containers only as wide as their content, you will need to wrap them inside their own container, named .left below:
<div class="container">
<div class="left">
<div class="red">Red</div>
<div class="green">green</div>
</div>
<div class="blue">blue</div>
</div>
If you now float .left to the left, and also float .left div to the left, you now no longer need to specify any inline-block elements. The blue container will simply take up as much space as it has available until the end of the .container.
.left {
float: left;
}
.left div {
float: left;
}
Fiddle
Edit
Silly me, the .left container is obviously not needed as long as you just add float: left to your red and green blocks, just like #Ennui said above in the comments :)
Updated fiddle
Change your css to this:
.container{border: 2px solid black; padding: 5px; position: relative; width: 100%;}
.container div {height: 20px;}
.red{border: 2px solid red; display: block; float: left;}
.green{border: 2px solid green; display: block; float: left;}
.blue{border: 2px solid blue;}
Tested in Chrome
EDIT
Silly me, this is the forked jsfiddle: http://jsfiddle.net/BWRVk/
I guess it is all based on what you want your images to be. I just used % on the images to show they can be resized according to responsive design. http://jsfiddle.net/6kLVn/7/
HTML
<div class="container">
<div class="red">Red</div>
<div class="green">green</div>
<div class="blue">blue</div>
</div>
CSS
.container{border: 2px solid black; padding: 5px; position: relative; margin:0px; width: 100%;}
.container div {height: 20px; display: inline-block; padding:0px; margin:0px;}
.red{border: 2px solid red; width:31%; }
.green{border: 2px solid green;width:31%;}
.blue{border: 2px solid blue;width:31%;}
If you want it to be responsive, give the divs % widths.
http://jsfiddle.net/feitla/6kLVn/6/
.container div {height: 20px;}
.red{border: 2px solid red;width:10%;display:inline;}
.green{border: 2px solid green;width:10%; display: inline;}
.blue{border: 2px solid blue;display:inline-block;width:80%;}
Give the container display: flex , each div flex: 1 and the last div give it flex-shrink: 1; width: 100%
Example here - http://jsfiddle.net/wtsn3uzh/
This question already has answers here:
2 column div layout: right column with fixed width, left fluid
(8 answers)
Closed 8 years ago.
Im searching for a way to have 2 divs as columns where div on right has a fixed width and div on left fill remaining space.
Does anyone happen to know if this can be done?
My attempt (renders block2 underneath block1):
<style>
.block1 {
width: auto;
height: 200px;
background-color: green;
}
.block2 {
float: right;
height: 200px;
width: 200px;
background-color: red;
}
</style>
<div class="block1">test1</div>
<div class="block2">test2</div>
You can do it like this:
HTML:
<div class="right">right</div>
<div class="left">left</div>
CSS:
.left{
background:red;
}
.right{
float:right;
width:200px;
background:green
}
Check this live example http://jsfiddle.net/QHTeS/2/
Float Both of the elements left:
<style>
.block1 {
width: auto;
height: 200px;
float: left;
background-color: green;
}
.block2 {
float: left;
height: 200px;
width: 200px;
background-color: red;
}
</style>
<div class="block1">test1</div>
<div class="block2">test2</div>
You should wrap them in a container as well to prevent messing up the rest of your layout. :)
http://jsfiddle.net/tcFjN/
That was wrong!
Use display: table; on parent and display: table-cell; on children:
<div id="wrapper">
<div class="block1">test1</div>
<div class="block2">test2</div>
</div>
#wrapper
{
display: table;
width: 100%;
}
.block1 {
width: auto;
height: 200px;
display: table-cell;
background-color: green;
}
.block2 {
display: table-cell;
height: 200px;
width: 200px;
background-color: red;
}
http://jsfiddle.net/tcFjN/1/
This is my solution without floats. The only caveat is that I need to use a wrapper. So, if the desired HTML is
parent (has a border, margin, padding,...)
left (fixed width)
right (variable width, fill the entire space)
I must rewrite it as
parent (has a border, margin, padding,...)
wrapper (has no styling)
left (fixed width)
right (variable eidthm, fill the entire space)
My HTML is
<div style="border:1px solid black; background:red; margin:10px; padding:10px;" >
<div style="">
<div style="display:table-cell; padding:10px; min-width:100px; max-width:100px;background:green;">Left</div>
<div style="display:table-cell; padding:10px; width:100%; background:yellow;">Main content</div>
</div>
</div>
The main points here are:
No use display:table because then we can not set the border
The use of min-width, max-width
The use of width:100%
Check this jsfiddle
Start out with a container <div> (#container) that holds both the left and right <div>s. Float one <div> to the right and give it a specific width (320px in my example). Then give the other <div> an absolute position starting at the absolute left (0px) and ending at the left edge of the <div> on the right (320px).
If you adjust the width of #container, the right <div> will remain fixed at 320px while the left <div> will expand to fill whatever the remaining area is.