I had three divs inside a main div with id main_div and has css already as below
<div id="main_div" style="height:10px; line-height:50px; margin-top:1px; position:relative;>
</div>
I just want to insert three divs in the main div as below
<div id="main_div" style="height:10px; line-height:50px; margin-top:1px; position:relative;>
<div>
Div One should be Left(breadcrumb_text)
</div>
<div>
Div Two should be Center(dropdownlist)
</div>
<div>
Div Three should be Right(Pagination)
</div>
</div>
So i want the div format to display the text like
breadcrumb_text dropdownlist Pagination
I tried with different css by using position attribute and various css options but could n't able to align them in a horizontal line with one div as left , one div as center and other div to right.
So can anyone let me know me know the css to place them in an horizontal line ?
This maybe help you Fiddle
#main_div > div {
width: 33%;
float: left;
}
I have modified your code little bit with spacing equally for each div and removed Position in the Main div.
Sometimes position will overlap with other div (position) based on z-index value. so if you really need use position unless not required.
#main_div{
height:10px; line-height:50px; margin-top:1px;
box-sizing:border-box;
}
#main_div > div{
width:31.1%;
float:left;
box-sizing:border-box;
border:1px solid grey;
margin-right: 10px;
display:inline-block;
}
#main_div > div:first-child{
margin-left:10px;}
<div id="main_div">
<div>
Div One should be Left(breadcrumb_text)
</div>
<div>
Div Two should be Center(dropdownlist)
</div>
<div>
Div Three should be Right(Pagination)
</div>
</div>
I think this is what you are asking for
JSFiddle
CSS
body
{
margin:0%;
}
.main_div
{
display:block;
margin:0% 5%;
width:90%;/*Just random, modify as per your requirement*/
height:300px; /*Just random, modify as per your requirement*/
background:#eee;
position:relatve;
}
.left-div, .center-div, .right-div
{
display:inline-block;
height:100%;
position:relative;
float:left;
width:33%;
border:1px solid #000;
text-align:center;
padding-top:5px;
}
HTML
<div class="main_div">
<div class="left-div">
Div One should be Left(breadcrumb_text)
</div>
<div class="center-div">
Div Two should be Center(dropdownlist)
</div>
<div class="right-div">
Div Three should be Right(Pagination)
</div>
</div>
Related
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
i have a pink colored container and inside it there are 2 divs, red and green placed side by side with display:inline-block; rule in css.i need both this divs to take 50% width so that they appear as a single div.but when i set the width to 50% the green jumps below red div.when i set width to 49% it jumps to same line but there are gaps in between which is not what i want, some body help.
i need them to stick togather in a line as if they appear as a single div.
i'll put my code pen link here...
http://codepen.io/ShamZ/pen/gLXBow
HTML
<div class="container">
<div class="box">
</div>
<div class="box2">
</div>
</div>
css
.container{
width:800px;
height:800px;
background-color:pink;
}
.box{
display:inline-block;
width:50%;
height:50px;
background-color:red;
}
.box2{
display:inline-block;
width:50%;
height:50px;
background-color:green;
}
the Problem with our Code is that HTML detect whitespace between the box elements in the container - and therefor it seems like theres not enough space in the container for 2 Divs with 50% width. - Set them to 48% or even smaller and u will see that they will fit among a line.
One Solution can be:
.container{
width:800px;
height:800px;
background-color:pink;
display:inline-block;
font-size: 0;
}
.box{
display:inline-block;
width:50%;
height:50px;
background-color:red;
}
.box2{
display:inline-block;
width:50%;
height:50px;
background-color:green;
}
<div class="container">
<div class="box">
</div>
<div class="box2">
</div>
</div>
and then set another font-size in child elements
This is a known issue where white-space between inline-block elements cause margins to appear. Take a look at this example (fixed)
.container{
width:800px;
height:800px;
background-color:pink;
}
.box{
display:inline-block;
width:50%;
height:50px;
background-color:red;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.box:nth-of-type(2) {
background-color: green;
}
<div class="container">
<div class="box">
</div><div class="box">
</div>
</div>
Switch to floats, ala http://codepen.io/davewallace/pen/aBVQLN
inline-block can result in odd spacings that may need further workarounds.
When using floats you can achieve the desired effect simply, you may need to investigate the use of 'clearfix' on containers wrapping your floated elements.
Add font-size:0 to parent element .container
.container{
width:800px;
height:800px;
background-color:pink;
font-size:0;
}
.box{
display:inline-block;
width:50%;
height:50px;
background-color:red;
}
.box2{
display:inline-block;
width:50%;
height:50px;
background-color:green;
}
<div class="container">
<div class="box">
</div>
<div class="box2">
</div>
</div>
I'm making a form with two input area, the second area should be content editable div somehow.
I want to make the #topic_title_input sitting above the #topic_content_input with the same width. It could be easily achieved by giving them display:inline-block, But for some complicated reason, I can't change the display-inline property of the second input area
Any idea how to make the #topic_title_input sitting above the #topic_content_input?
html
<div class="left_container">
<input id="topic_title_input" >
<div id="topic_content_input" contenteditable="true" ></div>
</div>
<div class="right_container">
</div>
<div class="clear_float">
</div>
css
#topic_title_input{
width:521px;
}
#topic_content_input{
/*do not change the display:inline */
width:521px;
display:inline;
background-color: orange;
border: solid 1px black;
}
/*do not change the css below*/
.left_container{
position:relative;
float:left; width:50%;
}
.right_container{
position:relative;
float:right; width:50%;
}
</style>
I am trying to get two divs to sit side by side within another div, however the first div won't show up in the container div. "contactleft" wont show up inside of "contactcont". I'm not sure if it has something to do with the display:block's or not? I tried clearing the "left" one too, no luck. Anyone know whats up? Thank you!
html:
<div id="contact">
<img src="Images/contactbanner.jpg" alt="contactbanner">
</div>
<div id="contactcont">
<div id="contleft">
</div>
</div>
CSS:
#contactleft {
float:left;
display:block;
background-color:red;
width:100px;
height:300px;
}
#contactcont {
display:block;
clear:both;
background-color:blue;
height:350px;
width:960px;
margin-left:auto;
Margin-right:auto;
}
You have what I assume is a typo in your code. Should work correctly with the following:
<div id="contactcont">
<div id="contactleft">
</div>
</div>
See jsfiddle
You have a typo at contleft in your CSS it should be :
#contleft {
float:left;
display:block;
background-color:red;
width:100px;
height:300px;
}
Your HTML looks fine :
<div id="contactcont">
<div id="contleft">
inner content here
</div>
</div>
Here is the fiddle showing that.
You're actually pretty good there, I would just change your "contactLeft" to a class, and repeat "contactLeft" as many times as you need to. Here's a link to a CodePen.
Link to CodePen
Here's the HTML:
<div id="contactCont">
<p>contact Container</p>
<div class="contleft">
<p>contact Left</p>
</div>
<div class="contleft">
<p>contact Left</p>
</div>
</div>
And here's the CSS:
.contleft {
float:left;
display:block;
background-color:red;
width:100px;
height:300px;
border: 1px solid black;
margin-left:1px;
}
#contactCont {
display:block;
clear:both;
background-color:blue;
height:350px;
width:960px;
margin-left:auto;
Margin-right:auto;
}
Note, that I changed your banner height to 20px and stretched the screen width.
Then I just copied your second "div" inside your container in the same hierarchy to add another side by side. I added 1px of margin-left, and 1px solid black borders to exaggerate the point.
You can also reference bootstrap for some responsive sizings if you're new to this until you get to understanding the CSS and HTML elements a little more.
Get BootStrap
I am trying to position the second image inline next to the one before, the second image is smaller and i want it to sit on the same bottom line next to the larger one next to it. this will create a gap above the second image where i can put a small bit of text.
My problem is when i play around with background-size:, height: and width: to change the size of the image it just goes to the top left hand corner of its surrounding div.
I plan on having 4 more small image next to the small one so I'm asking please could anyone sort out the positioning of the divs and css so that i can easily add more next to the prior one,
Here is an image to give you an understanding of what i am trying to achieve, The red box shows where i want it to be positioned, and the other red box is where i will have the next skin.
LINK
Things i have tried:
Bottom:0
margin-top ( to push it down ) though this does not leave room for me to add text above the smaller images
padding-top:
Here is my current CSS:
#secondinner {
width:980px;
margin:0 auto;
overflow: hidden;
}
#dailyskin {
width:120px;
height:20px;
background-color:#336699;
color:white;
font-size:14px;
text-align:center;
padding-top:1px;
}
#topskin {
background-image:url(images/topskins/1f.png);
background-size:110px;
height:220px;
background-repeat:no-repeat;
width:110px;
dislpay:inline-block;
float:left;
margin-top:5px;
}
#topskin2 {
background-image:url(images/topskins/1f.png);
background-size:80px;
height:150px;
background-repeat:no-repeat;
width:80px;
dislpay:inline-block;
float:left;
margin-top:5px;
}
#downloadbutton1 {
width:100%;
}
#firstskin {
width:110px;
overflow:hidden;
float:left;
}
#secondskin {
width:100px;
overflow:hidden;
float:left;
padding-left:10px;
}
Here is the HTML:
<div id="secondinner">
<div id="dailyskin">Todays Daily Skin!</div>
<div id="firstskin">
<div id="topskin"></div>
<button id="downloadbutton1" type = "button" name = "Download"> Download </button>
</div>
<div id="secondskin">
<div id="topskin2"></div>
<button id="downloadbutton1" type = "button" name = "Download"> Download </button>
</div>
</div>
This is the third section to the index page.
</div>
Here is a JS fiddle to show you what i mean,
http://jsfiddle.net/bjbear123/qdwgpaqc/
display: table-cell; with a vertical-align: bottom could be a good solution.
Have a jsBin!
HTML
<div class="skin-wrap">
<div>
<img src="http://www.placehold.it/100X300" />
<button>Download</button>
</div>
<div>
<p>text above </p>
<img src="http://www.placehold.it/100X200" />
<button>Download</button>
</div>
</div>
This is the third section to the index page.
CSS
.skin-wrap {
display: table;
}
.skin-wrap > div {
display: table-cell;
width: 100px;
vertical-align: bottom;
padding: 10px;
}
And if you don't want / are not able to use table-cell as misterManSam answered you can use nested divs with position absolute.
.wrapper{
position: relative;
height: 200px;
width: 100px;
}
.content{
position: absolute;
bottom: 0;
}
<div class="wrapper">
<div class="content">
<img src="whatever.jpg" />
</div>
</div>
And there you have a little jsbin http://jsbin.com/jiqakefu/1/
One easy solution is to increase the top margin of topskin2.
#topskin2 {
background-image:url(images/topskins/1f.png);
background-size:80px;
height:150px;
background-repeat:no-repeat;
width:80px;
dislpay:inline-block;
float:left;
margin-top:75px;
i tried this on jsfiddle both download button were inline.
You can set margin as per your need, if you want space between both then you can use margin-left to create gap.
you were right doing it through bottom:0;
The thing you missed was to set position:absolute; and for outer div position:relative;
Here's a fiddle: http://jsfiddle.net/Nive00/qdwgpaqc/2/
I need to show one big div with 3 divs inside it. The layout has to be fluid, i.e. the height of the big div must adapt to the contents of the 3 divs inside it. Moreover, I want the 3 divs have the same height, and I managed to do that with display:table property for the container div and display:table-cell property for the 3 inner divs. Nevertheless, there is a big problem: as soon as I put a div with a margin-top: inside the first of the three divs, it shifts downwards the content of the other two divs.
I really cannot understand why, any help would be much appreciated.
Here is the html and the css code:
<div id="body">
<div id="left-box">
<div id="left-container">
LEFT LEFT LEFT LEFT LEFT LEFT
</div>
</div>
<div id="central-box">
<div id="central-container">
CENTRAL CENTRAL CENTRAL CENTRAL CENTRAL
</div>
</div>
<div id="right-box">
<div id="right-container">
RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT
</div>
</div>
</div>
CSS:
#body {
width:80.9%;
margin:0 auto 0 auto;
height:auto;
/*background-color:#0F3;*/
display:table;
}
#left-box {
height:100%;
width:60%;
background-color:red;
display:table-cell;
border-right:1px solid #000;
}
#left-container {
background-color:#0CF;
width:72%;
margin-top:82px;
margin-left:2%;
}
#central-box {
background-color:#00F;
display:table-cell;
border-right:1px solid #000;
width:20%
}
#central-container {
margin-top:0px;
float:left;
background-color:#FF0;
}
#right-box {
background-color:#0C0;
display:table-cell;
border-right:1px solid #000;
width:19%;
}
#right-container {
margin-top:0px;
background-color:#FF0;
}
Try using vertical-align on the divs, for example something like this:
div {vertical-align:top;}
it is a similar phenomenon as with inline-block elements we discussed here
here I put your code + vertical-align on jsfiddle