This is my situation
HTML
<div id="content">
<div id="item1">
<div class="empty"> </div>
<div class="empty"> </div>
<div class="empty"> </div>
</div>
<div id="item2">
<div class="empty"> </div>
</div>
</div>
CSS
.empty
{
width: 100px;
height: 100px;
background-color: red;
}
#item1
{
float: left;
padding: 10px;
background-color: green;
}
#item2
{
float: left;
padding: 10px;
background-color: blue;
}
#content
{
padding: 10px;
background-color: pink;
overflow: hidden;
}
This looks that http://jsfiddle.net/59qEt/3/
So my question is: How I must set my styles to #item2 has the same height which #item1 have?
Any help would be appreciated.
You can use display:table-cell property for this. and remove float:left write like this:
#item1, #item2
{
display:table-cell;
}
Check this http://jsfiddle.net/59qEt/5/
Note it's work till IE8 & above.
in item 1 you are using 3 div each div with padding:10px; and in item 2 just 1 div you can do 2 thing 1 in item 2 add 3 div and option 2. apply height on item 2 and item 2 child empty
remove the item2 from css
`
<div id="item1">
<div class="empty"> </div>
<div class="empty"> </div>
<div class="empty"> </div>
</div>
<div id="item1">
<div class="empty"> </div>
</div>
`
You can try something like this:
#item2 > div {
padding-bottom:200px;
}
Here's the fiddle for this :
http://jsfiddle.net/59qEt/24/
Just add two string of JavaScript http://jsfiddle.net/59qEt/20/
Works in all browsers
Related
I've searched quite a bit looking for an explanation as to why this behavior is occurring.
Essentially I've setup 2 columns, each with a nav bar and content area.
CSS
#mainContainer {
background-color: lightblue;
width: 100%;
height: 300px;
}
#leftContainer, #rightContainer {
border: 1px solid black;
display: inline-block;
background-color: red;
width: 40%;
height: 100%;
}
#leftBar, #rightBar {
background-color: purple;
height: 10%;
}
#leftMain, #rightMain {
background-color: grey;
height: 90%;
}
HTML
<div id="mainContainer">
<div id="leftContainer">
<div id="leftBar"></div>
<div id="leftMain"></div>
</div>
<div id="rightContainer">
<div id="rightBar"></div>
<div id="rightMain"></div>
</div>
</div>
Whenever I add an element to the nav bar in only one column it shifts the entire column down.
http://jsfiddle.net/qn6rs0q2/3/
<div id="mainContainer">
<div id="leftContainer">
<div id="leftBar">
<button>Test</button>
</div>
<div id="leftMain"></div>
</div>
<div id="rightContainer">
<div id="rightBar"></div>
<div id="rightMain"></div>
</div>
</div>
But if I add another element to the other column they line up again.
http://jsfiddle.net/qn6rs0q2/5/
<div id="mainContainer">
<div id="leftContainer">
<div id="leftBar">
<button>Test</button>
</div>
<div id="leftMain"></div>
</div>
<div id="rightContainer">
<div id="rightBar">
<button>Test 2</button>
</div>
<div id="rightMain"></div>
</div>
</div>
To clarify, I'm not looking for a solution to fix this behavior. Rather I'm hoping someone can explain the underlying reason behind why it's behaving as it is. Thanks in advance.
It happens because the default vertical alignment of inline elements is the baseline. If you set the vertical alignment to top (or middle) for both sides, they line up as you want:
#leftContainer, #rightContainer {
border: 1px solid black;
display: inline-block;
background-color: red;
width: 40%;
height: 100%;
vertical-align:top;
}
jsFiddle example
I want to create a table in my wordpress website. i want to place the table in the right side. The problem is, if i want to write contents outsides like to left side of the table then how will i do it. Can you please give me an example?
I am beginner in css so plz forgive me for the writing style.
I want to make a style for a website like (the pic i have attached). Can you Please help me that how can I write freely in the left side of the table?
Use position: absolute:
#navbar {
position: absolute; left: 0;
width: 20%;
}
#content {
position: absolute; right: 0; /*Presuming this is the table*/
}
You should take a look at the display property of css, this is mainly used for aligning content on webpages.
http://www.w3schools.com/cssref/pr_class_display.asp
You mean a table inside the content div?
#content {
margin-left:20%;
}
#navbar {
float: left;
width: 20%;
}
.table-wrapper {
display:inline-block;
}
<div id="layout">
<div id="header">Top Header</div>
<div id="navbar">Navigation</div>
<div id="content">
<div class="table-wrapper">
<table><tr><td>table 1</td></tr></table>
</div>
<div class="table-wrapper">
<table><tr><td>table 2</td></tr></table>
</div>
</div>
<div id="footer">Bottom Footer</div>
</div>
http://jsfiddle.net/KhH42/1/
Something like this?
#wrapper {
border:solid 2px #000;
margin:20px;
}
#wrapper div[class*="col-"]{
float:left;
}
.col-1 { width:30%; background:#eee; }
.col-2 { width:30%; background:#e2e2e2; }
.col-3 { width:40%; background:#ccc; }
#wrapper:after { content:""; clear:both; display:block; }
<div id="wrapper">
<div class="col-1">
<p>col 1 content</p>
</div>
<div class="col-2">
<p>col 2 content</p>
</div>
<div class="col-3">
<table>
<tr>
<td>
my table
</td>
</tr>
</table>
</div>
</div>
http://jsfiddle.net/3LUqg/
In this fiddle : http://jsfiddle.net/H4F8H/16/
I'm attempting to center two divs by wrapping an outer div and centering it :
<div style="margin-left:auto;margin-right:auto;">
But the divs are remaining left aligned. How can I center these divs on page ?
fiddle code :
HTML :
<div style="margin-left:auto;margin-right:auto;">
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
</div>
CSS :
*{
margin:0;
padding:0;
}
#block {
margin-right:100px;
border-width: 2px;
border-color: #4682B4;
background-color: WHITE;
width: 100px;
text-align: center;
line-height:30px;
padding:3px 0;
float:left;
}
img{
float:left;
}
#block:hover {
background-color: #C2DFFF ;
}
div is a block level element by default so it will take up 100% of horizontal space if you do not assign some width to it, so you need to assign some width to your container
<div style="margin-left:auto;margin-right:auto; width: 300px;">
Here, you can just set the width accordingly. Also avoid using inline CSS.
Your CSS is lil sloppy, for example margin-right:100px; is not required, also, you can use shorthand like
margin: 0 auto; = margin-left:auto; margin-right:auto;
Demo (Added a red border just to show the boundaries)
Note: You are floating your elements, so make sure you clear your floats either by using <div style="clear: both;"></div> which I've already done in the demo provided, else you can also use the snippet below to self clear the parent like
.clear:after {
display: table;
clear: both;
content: "";
}
A couple things I want to point out in this post:
You have set Id="block" in two different instances. Id's are meant to be unique. If you want a reusable identifier you should be using classes.
Inline styling should be avoided when possible. In this case there is no need to set inline styling on the parent div.
There is more then one way to center div's
I am going to leave this link here: http://thenewcode.com/723/Seven-Ways-of-Centering-With-CSS
This would be my solution:
html:
<div class="container">
<div class="block">
<span>Test</span>
</div>
<div class="block">
<span>Test 2</span>
</div>
</div>
css:
.container {
display: flex;
justify-content: center;
align-items: center;
}
.block {
display: flex;
background: grey;
width: 30%;
height: 200px;
border: 1px solid #777;
margin: 5px;
}
Give a width to that container.
#outerdiv{
margin-left:auto;margin-right:auto;
width:500px;
}
<div align="center">
<!-- -staff ->
</div>
margin:auto; doesn't work unless the width is specified...
<div style="margin:auto;width:100px;">
your content here. [Replace the width with your choice]
</div>
Giving width and margin auto will centralise the content in specified width.
<div style="margin-left:auto;margin-right:auto;width:400px;">//give variable width here..Normally 1000 to 1018..
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
</div>
Like this
DEMO
CSS
.container{
width:960px;
margin:0 auto;
text-align:center;
border:1px solid red;
}
Usual CSS centering issue, just not working for me, the problem is that I don't know the finished width px
I have a div for the entire nav and then each button inside, they dont center anymore when there is more than one button. :(
.nav {
margin-top: 167px;
width: 1024px;
height: 34px;
}
.nav_button {
height: 34px;
margin: 0 auto;
margin-right: 10px;
float: left;
}
<div class="nav">
<div class="nav_button">
<div class="b_left"></div>
<div class="b_middle">Home</div>
<div class="b_right"></div>
</div>
<div class="nav_button">
<div class="b_left"></div>
<div class="b_middle">Contact Us</div>
<div class="b_right"></div>
</div>
</div>
Any help would be greatly appreciated. Thanks
Result
If the width is unknown, I did find a way a center the buttons, not entirely happy but doesnt matter, it works :D
The best way is to put it in a table
<table class="nav" align="center">
<tr>
<td>
<div class="nav_button">
<div class="b_left"></div>
<div class="b_middle">Home</div>
<div class="b_right"></div>
</div>
<div class="nav_button">
<div class="b_left"></div>
<div class="b_middle">Contact Us</div>
<div class="b_right"></div>
</div>
</td>
</tr>
</table>
I stumbled across this problem today and I got it to work with
<div style="text-align:center;">
<button>button1</button>
<button>button2</button>
</div>
Consider adding this to your CSS to resolve the problem:
button {
margin: 0 auto;
display: block;
}
Another nice option is to use :
width: 40%;
margin-left: 30%;
margin-right: 30%
The problem is with the following CSS line on .nav_button:
margin: 0 auto;
That would only work if you had one button, that's why they're off-centered when there are more than one nav_button divs.
If you want all your buttons centered nest the nav_buttons in another div:
<div class="nav">
<div class="centerButtons">
<div class="nav_button">
<div class="b_left"></div>
<div class="b_middle">Home</div>
<div class="b_right"></div>
</div>
<div class="nav_button">
<div class="b_left"></div>
<div class="b_middle">Contact Us</div>
<div class="b_right"></div>
</div>
</div>
</div>
And style it this way:
.nav{
margin-top:167px;
width:1024px;
height:34px;
}
/* Centers the div that nests the nav_buttons */
.centerButtons {
margin: 0 auto;
float: left;
}
.nav_button{
height:34px;
margin-right:10px;
float: left;
}
Consider adding this to your CSS to resolve the problem:
.btn {
width: 20%;
margin-left: 40%;
margin-right: 30%;
}
In HTML you can write,
<div id="btn">
<button>Click</button>
</div>
if you work with JS instead of CSS, you can write this to move the button to center.
const bu = document.getElementById("btn");
bu.style.cursor="pointer";
bu.style.justifyContent="center";
bu.style.display="flex";
when all else fails I just
<center> content </center>
I know its not "up to standards" any more, but if it works it works
I have a container DIV with a fixed height and width (275x1000px). In this DIV I want to put multiple floating DIVs each with a width of 300px, and have a horizontal (x-axis) scrollbar appear to allow the user to scroll left and right to view everything.
This is my CSS so far:
div#container {
height: 275px;
width: 1000px;
overflow-x: auto;
overflow-y: hidden;
max-height: 275px;
}
div#container div.block {
float: left;
margin: 3px 90px 0 3px;
}
The problem is that the floating DIVs will not continue past the width of the container. After putting three of the floating DIV's they will continue on beneath. If I change overflow-y to auto, then the vertical scrollbar appears and I can scroll down.
How can I change this to make the floating DIVs continue on without going beneath each other?
div#container {
height: 275px;
width: 1000px;
overflow: auto;
white-space: nowrap;
}
div#container span.block {
width: 300px;
display: inline-block;
}
The trick here is only elements that behave as inline by default will behave properly when set to inline-block in Internet Explorer, so the inner containers need to be <span> instead of <div>.
#row {
white-space: nowrap; /* important */
overflow: auto;
}
.items {
display: inline-block;
}
<div id="row">
<div class="items">
<img src="//placehold.it/200/100" alt="item 1" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 2" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 3" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 4" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 5" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 6" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 7" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 8" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 9" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 10" />
</div>
</div>
The trick here is the "white-space: nowrap" property of the parent which simply tells all it's child elements to continue horizontally and the "display: inline-block" property of it's children. You don't need to add any other property to make this work.
JS Fiddle: http://jsfiddle.net/2c4jfetf/
You need an extra div with a large width to contain the blocks, then they will extend wider than the container div and not drop down to a new line.
The HTML:
<div id="container">
<div id="width">
<div class="block">
<!-- contents of block -->
</div>
<div class="block">
<!-- contents of block -->
</div>
<div class="block">
<!-- contents of block -->
</div>
<!-- more blocks here -->
</div>
</div>
The CSS:
#container {
height: 275px;
width: 1000px;
overflow-x: auto;
overflow-y: hidden;
max-height: 275px;
}
#container #width {
width:2000px; /* make this the width you need for x number of blocks */
}
#container div.block {
float: left;
margin: 3px 90px 0 3px;
}
Wrap your floated divs in another div with the wider width.
<div style="width:230px;overflow-x:auto;background-color:#ccc;">
<div style="width:400px">
<div style="height:100px;width:100px;float:left;border:1px solid #000;"></div>
<div style="height:100px;width:100px;float:left;border:1px solid #000;"></div>
<div style="height:100px;width:100px;float:left;border:1px solid #000;"></div>
</div>
</div>
The table solution should work very well.
If you don't want to use tables, you can also put all .block divs in another div inside the #container and give that "in-between-div" a fixed - calculated - width using javascript after loading the page.
Of course if you already know how many .blocks you have / if the number is fixed, you can give the "in-between-div" a fixed width using css.
It sounds like you are doing gallery with div's?
What exactly are you using the divs for?
It may be easier to use a ul/li with spans inside of the li to get the same effect without all the headaches of floating divs.
Use:
div#container {
overflow: auto;
}
Or add a clearing div below the three divs with the style:
{
clear: both
}
Put the divs you want to scroll in a table like so:
<div style='width:1000;border:2 solid red;overflow-x:auto'>
<table><tr>
<td><div style='width:300;height:200;border:1 solid black'>Cell 1 </div></td>
<td><div style='width:300;height:200;border:1 solid black'>Cell 2 </div></td>
<td><div style='width:300;height:200;border:1 solid black'>Cell 3 </div></td>
<td><div style='width:300;height:200;border:1 solid black'>Cell 4 </div></td>
<td><div style='width:300;height:200;border:1 solid black'>Cell 5 </div></td>
</tr></table>
</div>
Edit:
I tried 3 of these suggested solutions - they all work fine in Google Chrome - but the first one (container1) doesn't work in IE (go figure) - so the SPAN solution gets my vote :-) :
<html>
<body>
<style>
div#container1
{
height: 275px;
width: 100%;
overflow: auto;
white-space: nowrap;
border:2 solid red;
}
div#container1 div.block
{
width: 300px;
height: 200px;
display: inline-block;
border: 1 solid black;
}
div#container2
{
height: 275px;
width: 100%;
overflow: auto;
white-space: nowrap;
border:2 solid red;
}
div#container2 span.block
{
width: 300px;
height: 200px;
display: inline-block;
border: 1 solid black;
}
div#container3
{
height: 275px;
width: 100%;
overflow: auto;
white-space: nowrap;
border:2 solid red;
}
div#container3 div.block
{
width: 300px;
height: 200px;
display: inline-block;
border: 1 solid black;
}
</style>
<p>
<div id='container1'>
<div class='block'>Cell 1 </div>
<div class='block'>Cell 2 </div>
<div class='block'>Cell 3 </div>
<div class='block'>Cell 4 </div>
<div class='block'>Cell 5 </div>
</div>
<p>
<div id='container2'>
<span class='block'>Cell 1 </span>
<span class='block'>Cell 2 </span>
<span class='block'>Cell 3 </span>
<span class='block'>Cell 4 </span>
<span class='block'>Cell 5 </span>
</div>
<p>
<div id='container3'>
<table><tr>
<td><div class='block'>Cell 1 </div></td>
<td><div class='block'>Cell 2 </div></td>
<td><div class='block'>Cell 3 </div></td>
<td><div class='block'>Cell 4 </div></td>
<td><div class='block'>Cell 5 </div></td>
</tr></table>
</div>
</body>
</html>
Edit 2:
I ran this test page through browsershots.org, to see how different browsers handle it.
Conclusion: Browser compatibility sucks. :-)
http://browsershots.org/http://dot-dash-dot.com/files/test_div2.htm
The table solution worked more often - but the span option (which is cleaner) only broke on browsers I've never heard of. :-)
My Ex:
div width: 850px
gridview
templatedcolumn
ItemTemplate
<span class="buttonspanlt"></span><asp:Button ID="imgEditSave" runat="server" Text="Edit SubStatus" CssClass="buttoncenter" OnClick="imgEditSave_OnClick"/><span class="buttonspanrt"></span>
<span style="display:none;float:left;clear:left;" id="spangrdCancel" runat="server"><span class="buttonspanlt"></span><asp:Button ID="imgCancel" runat="server" Text="Cancel" class="buttoncenter"/><span class="buttonspanrt"></span></span>
end ItemTemplate
end templatedcolumn
end gridview
end div
the button has left middle(actual button) right spans which where not floating as there was outer div with fixed width.
I had to use additional div with width 140px outside the button , inside the itemtemplate then it worked.
Hope this helps!!!
Thank You
Harish