This code
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
displays the divs like this.
div1
div2
div3
div3
I want to display these like
div1 div2 div3 div4
The number of divs placed horizontally is not fixed and varies, so I cannot write the css classes with left-padding, width etc defined.
Whats the best way to do it?
Use flexbox:
.container {
display:flex;
flex-direction:row;
}
.container > div {
border:5px dotted black;
background:red;
flex-grow:1;
padding:2em;
text-align:center;
}
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Some prefixing may be required depending on your target audience.
Learn about all the possibilities here.
Set the display style to inline-block
<div id="div1" style="display:inline-block"></div>
<div id="div2" style="display:inline-block"></div>
<div id="div3" style="display:inline-block"></div>
<div id="div4" style="display:inline-block"></div>
or better yet
<style>
#div1, #div2, #div3, #div4 {
display:inline-block
}
</style>
Just add a class like
<div id="div1" class="inline">lorem</div>
<div id="div2" class="inline">ipsum</div>
and in your CSS :
.inline {
float:left;
}
Additionaly, you can add some padding...
Related
I have this HTML:
<div class="styles container">
<h1>Styles</h1>
</div>
<div class="preview container">
<h1>Preview</h1>
</div>
I want the first div to be static. Let's say its width is to be 265 pixels. The .preview div should be next to it, but it should be responsive (by shrinking the window this div should also shrink). I tried with setting a % to this div, but still it goes below. How can I fix this?
First of all, DIV it's block element, and starts rendering from new line. There are few techniques to change the behavior. If you don't need to support IE6/IE7 you can use inline-block CSS style, e.g:
<div>
<div style="width:20%; display: inline-block;">
<h1>1</h1>
</div>
<div style="width:70%; display: inline-block;">
<h1>2</h1>
</div>
</div>
This is your solution:
HTML:
<div class="parent">
<div class="styles">
<h1>Styles</h1>
</div>
<div class="preview">
<h1>Preview</h1>
</div>
</div>
CSS:
.parent{
width:100%;
white-space: nowrap;
}
.styles{
width:265px;
display:inline-block;
}
.preview{
width:auto;
display:inline-block;
}
Hope it will solve you problem.Check Fiddle.
I have four divs inside a container like this:
<div class="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
I would like to keep the first and last div aligned to the edges of the screen and only center the two divs in the middle. I tried display inline block and adjusting the margins, but i just can't figure it out. Please try and enlighten me!
Kind Regards
Use this HTML
<div class="container">
<div class="block left">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block right">4</div>
</div>
and then this CSS
.container {
display:block;
text-align:center
}
.block {
display:inline-block;
border:1px solid #000;
padding:10px;
margin:auto
}
.left {
float:left
}
.right {
float:right;
}
you can also use first-child and last-child, but it's easier to add a class to first and last div
See fiddle here
Try using :nth-of-type() pseudo-class allows you to select elements with a formula,like this: http://jsfiddle.net/csdtesting/11fh7suy/
//second div
div.container div:nth-of-type(2) {
background-color: #9999ff;
text-align:center;
}
//third div
div.container div:nth-of-type(3) {
background-color: #9999ff;
text-align:center;
}
Hope it helps!
Adding an extra container will give you more control:
<div class="container">
<div class="block">1</div>
<div class="wrap">
<div class="block">2</div>
<div class="block">3</div>
</div>
<div class="block right">4</div>
</div>
.wrap{width:50px;margin:0 auto}
.block{float:left;width:25px;text-align:center}
.right{float:right}
I need to swap two elements by using css. My html is here:
<div class="container">
<div class="Div2">
<img src="Div2.jpg">
</div>
<div class="Div1">
<img src="Div1.jpg">
</div>
</div>
and my css is here:
.container{width:50%; margin:auto;}
.div2{float:left;width:100%;}
.div1{float:left;width:100%;}
is there any way how to put Div1 on the position of Div2 only with css without changing html?
Float .div2 to the right, and .div1 to the left:
.div2{ float:right; }
.div1{ float:left; }
You'll also have to remove the width: 100%; if you're attempting to stack them side by side.
Also, classes are case-senstive. In your example code, your div classes are .Div1 and .Div2, make sure to use all lowercase classes to match the definitions:
<div class="container">
<div class="div2">
<img src="Div2.jpg">
</div>
<div class="div1">
<img src="Div1.jpg">
</div>
</div>
Example: http://jsfiddle.net/dph8t/
I have a "container" DIV which has 2 floating DIV's with different height inside, and when I apply the background property on the "container" DIV it doesnt work.
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
http://jsfiddle.net/arthurg/XUmsU/
How can I show the background on the container (using CSS)?
Add overflow:hidden; to the container. Like this:
#container{
height:100%;
background:red;
overflow:hidden;
}
http://jsfiddle.net/XUmsU/1/
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
#container{
height:100%;
background:red;
overflow:hidden;
}
#left{
width:100px;
background:green;
height:30px;
float:left;
}
You need to clear floats.
Add this <br style="clear: both"/> after those two floating divs.
HTML:
<div id="container">
<div id="left"></div>
<div id="right"></div>
<br style="clear: both"/>
</div>
http://jsfiddle.net/XUmsU/3/
There is other (new) methods for clearfix (with pseudo-classes :before and :after).
I have a container that contains a number of left-floated divs, something like:
<div id="container">
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
</div>
<style>
.panel {float:left; width:200px;}
</style>
In my app, the user can add more and more panels to the container dynamically, and I'd like them to always stack up on the right, and for a horiz scroll bar to appear when the user has exceeded the available space.
jsfiddle here: http://jsfiddle.net/yzTFC/6/
Floated elements are dependent upon the width of their container and do no affect the size of the container. If it is possible, do not use floated elements in this case. I would use display:inline-block with a white-space:nowrap on the parent.
http://jsfiddle.net/yzTFC/45/
Another method would be to give an insanely large width on the container but I wouldn't advise this as it is seems sloppy.
http://jsfiddle.net/yzTFC/52/
Here is a good article on how floats work:
http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
Try this:
HTML
<div id="parent-container">
<div id="container">
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
</div>
</div>
CSS
.panel {float:left; width:200px; background-color:red; height:100px; border:solid 1px black;}
#container { width: 9999px; }
#parent-container {
overflow: auto;
}
Demo: http://jsfiddle.net/yzTFC/50/
My answer is similar to Ayman. I have also added another container.
HTML
<div id="wrapper">
<div id="panel-container">
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
</div>
</div>
CSS
.panel {float: left; width:200px; background-color:red; height:100px; border:solid 1px black;}
#wrapper {width: 606px; overflow-x: scroll; overflow-y: hidden; }
#panel-container {width: 1212px;}
Where #panel-container CSS width is a multiple of the .panels within it, so it would take some scripting to achieve this. Most likely some javascript.
The #wrapper width was arbitrary, I just decided to show three panels at a time in the viewport.