Get divs side by side within parent? - html

I'm trying to add 2 tabs in a wrapper div and am having trouble getting them to lie next to each other, taking up half the width each. I added the following css to each one:
width: 50%;
height: 100%;
display: inline-block;
For some reason they keep appearing beneath one another instead of next to one another.
I made a JsFiddle to show whats happening: http://jsfiddle.net/5zLoyc7q/1/
Can anybody please help me get them so they're lying to next eachother like normal tabs?

Why not float? Make sure your box-sizing is border-box. Next:
<div class="wrapper">
<div>Hello world</div>
<div>Guten Tag</div>
</div>
CSS:
.wrapper {
overflow:auto;
}
.wrapper > div {
float:left;
width: 50%;
}
display:inline-block adds 1px of whitespace to the right of the element. Also, if you're not displaying as border-box, you could run into issues with your box model in other words your 50% isn't what you think it is.
updated fiddle: http://jsfiddle.net/5zLoyc7q/2/
make sure to clear the floats.

Related

Creating a CSS assembly, floating divs left, right and bottom

I'm trying to create a "pattern" of divs that looks like this:
However, currently it looks more like this:
resulting in my page looking something like this:
In that final snip, everything is also pushed to the right. Ideally, I need the assembly to be centred. The Get Conditions button should also reside underneath the Print Runs textbox, as they both reside in the same div, and be centred beneath the two upper divs. The dropdown lists and radiobutton list are both where they should be.
I toyed with floating the bottom div, but the various things I tried mostly resulted in the lower div taking up more space between the two upper divs.
I have pasted the HTML and CSS in a JSFiddle, please bear in mind that it doesn't recognise ASP tools so doesn't give an accurate preview of what I'm trying to achieve.
https://jsfiddle.net/h4tr31gt/1/
This doesn't directly address your question of floats, but you can achieve the same result by using flexbox.
https://jsfiddle.net/gnw634gv/
.container {
background-color: lightblue;
height: 400px;
width: 100%;
display: flex;
flex-flow: row wrap;
}
.block-top {
width: 50%;
background-color: yellow;
height: 50%;
border: 1px solid black;
box-sizing: border-box;
}
<div class="container">
<div class="block-top">A</div>
<div class="block-top">B</div>
<div class="block-bottom">C</div>
</div>
As DaniP has suggested clearing floats would solve your issue. What float property does is removing your element from the actual page flow and aligning it according to your float value either right/left. So, when you try to add other element after the floated elements, it will occupy the page as if the floated elements doesn't exist. That is why you see that it is moved up. Also, floating the next element without clearing the previous elements floats will have the same result as without float. Hence, you need to clear the float using clear:both/right/left so that the surrounding of floated elements are cleared and you can align elements. You can check more on floats/clearfixes as some new things keep on arising every now and then. You might find it more clear.
add a class of clearfix to the parent div, like so:
<div class="clearfix"> </div>
then add the following style to your css:
.clearfix {
clear: both;
}
You can then reuse this anywhere else you are using floats.
https://jsfiddle.net/c3rLqce7/

divs inside divs positioning - no div fixed height

I know this is probably really simple, but i'm stuck on it for a while trying fiddle around with it.
Basically, this is my html setup :
<div id="main-div"><!-- Blue -->
<div id="sub-div"><!-- Red -->
<div class="content-div">
<p>This is the text. I need the button to be placed in content-div, which technically is, but it appers outside the div.</p>
BUTTON
</div>
</div>
</div>
Here is the fiddle with the CSS classes :
http://jsfiddle.net/03knuf7z/1/
What I'm trying to achieve is to have the <p> paragraph and <a> button both inside the sub-div surrounded by main-div
I've been trying to achieve this without a fixed content-div height, so I'm trying to put in height: auto; into my css hoping the content-div will stretch enough to cover both <p> and <a> elements, but that doesn't do the job, because the button still appears outside the content-div box, just like in the fiddle.
I can achieve the desired result by putting fixed height to the content-div, so if I'll change the auto in height: auto; to height: 150px;, it works and both elements, the paragraph and the button are in the box.
But thinking of responsivity on small screen devices, phone screens for example, I'd like to avoid fixed values.
Is there a way to do this without fixed height ?
You need to add an element with clear after the button with float.
You can add this to the HTML, or use the CSS :after pseudo-element to create a virtual element at the end of your content-div:
.content-div:after {
content:'';
clear:both;
display:block;
}
Updated fiddle
This can be fixed easily with a clear class. I have updated your JSFiddle.
I have added the following class:
.clear {
clear: both;
}
And this after your button:
<div class="clear"></div>
You can also use the :after property. Then you will have the use the following CSS:
.content-div:after {
display: block;
content: " ";
clear: both;
height: 0;
}
Add overflow-hidden; to .content-div.
.content-div{
font-size: 18px;
overflow: hidden;
}

Unwanted Space(Gap) is coming between two div's

I have two div's .One is image Slider Div and other is footer Div.Now the main problem that is coming is that there is some unwanted space (gap) is coming between these two div's which i don't want.I want both these Div's to be One after another without any space but i am not able to do it.
Here is the HTML ..
<div style="padding-top:77px;">
First Slider Div
</div>
<div id="footer" class="footer-shadow">
Second Footer Div
</div>
And here is the css used..
.footer-shadow
{
position:relative;
background: url('../img/new_images/footer-bg.png') center center no-repeat;
background-size: contain;
height: 300px;
width: 100%;
color: gray;
}
Here is my fiddle link..
Fiddle Demo
Please help me to Correct this.Thanks ..
It is most probably a browser issue, as it's displaying fine for most of us.
A normaliser should help to make all browsers consistent, by overriding the browsers default margins, paddings, etc.
Have a look at normalize.css
IT looks like normal spacing between divs, but if you want to remove it, try using a negative margin.
Example:
margin-top: -8;

HTML/CSS: 3 columns, variable sides and fixed centered middle column

My problem is with the header. So I basically have 3 columns of divs. I want the middle one to have a constant width of 980px, and then I want the left of the header to extend to the end of the browser window with a blue background color. As for the right of the header, I want that to extend to the end of right side of the browser with a black background color. It kind off looks like this:
<------------------------------[blue][center header][black]---------------------------->
I've done my research and all I could find so far are two columns with a fixed left column with the right column filling up the rest of the space. I wonder how this can be applied to my problem?
Would it be like:
<div style="width:100%;">
<div style="display:table-cell; background-color:blue;"></div>
<div style="width: 980px;">my header</div>
<div style="display:table-cell; background-color:black;"></div>
</div>
Thank you!
A simple solution - basicaly using your exact stying, but putting another block in the central table-cell element, something like this span here:
<div class="wrapper">
<div class="left"></div>
<div class="center"><span>my header</span></div>
<div class="right"></div>
</div>
I moved all the inline style to a separate CSS block and used class selectors:
.wrapper {
display:table;
width:100%;
}
.left {
display:table-cell;
width:50%;
background-color:blue;
}
.right {
display:table-cell;
width:50%;
background-color:black;
}
.center {
display:table-cell;
}
.center span {
display:inline-block;
width:900px;
}
here is a jsfiddle
and here I made the center much narrower for a better illustration: jsfiddle
Hope this helps =)
Unfortunately there isn't a super smooth way of doing this that is also has wide cross compatibility support. There is a CSS spec for display called flex or flexbox which would do what you want beautifully and elegantly, but it has very limited support at the moment. Here is some resources on flexbox for your perusal...
http://css-tricks.com/old-flexbox-and-new-flexbox/
In the meantime, you can achieve the layout you want with some basic CSS jiggery-pokery that will get you what you want, but it requires absolute positioning your middle div.
Heres the JSFiddle: http://jsfiddle.net/CW5dW/
Here's the CSS:
.left {
width: 50%;
height: 300px;
float: left;
padding-right: 160px;
box-sizing: border-box;
background: red;
}
.right {
width: 50%;
height: 300px;
float: right;
padding-left: 160px;
box-sizing: border-box;
background: blue;
}
.middle {
position: absolute;
width: 300px;
height: 300px;
left: 50%;
padding: 10px;
margin-left: -150px;
box-sizing: border-box;
background: orange;
}
What is going on here you might ask?
Basically, we are taking the div with class middle and removing it from the flow of the document. This allows us to float our left div left, and our right div right, with widths of 50% in order to fluidly take up ALL space of the browser.
We then tell the middle div to take up 300px of space (in your case 980), and we tell it to go 50% of the total width of your browser from the left. This doesn't center it though, because its calculated from the left edge of your div. So we give it a negative margin space of half it's width, to sort of "move" that left edge to the center of the div.
Then, since we know the middle div has a width of 300px (in your case 980), we can then say that the left div should have some padding on its right edge greater than or equal to half the middle divs width, in my example that's 150px, and I added 10px more so text couldn't come right to the edge of the div, so 160px total. We do the same for the right div but for it's left side. This limits the content of those two divs from falling underneath our middle div.
This answer is not an "answer" as such - it's an extended comment to #Michael's post. I have, however, posted another answer - a jQuery solution.
Regarding #Michael's answer (which is a very tidy solution indeed) there is a tiny issue that if you remove your height declaration (which the OP undoubtedly will) then the backgrounds for the various columns become exposed - this method relies on the backgrounds all levelling out at their bottom edge in order to make the design coherent. If the OP's design doesn't have backgrounds behind the columns then this solution should be fine. If backgrounds are required (which they might be judging by the question wording) then it could be awkward. Two solutions to this...
a simple javascript that scans the page for column length, finds the longest, and matches all shorter ones to the maximum.
The other (and probably better) solution is to drop a background into your with the columns already on it (it only needs to be 1px high I guess) - just make sure the central white band is 980px wide and the side columns extend off a thousand or so pixels to accommodate even the largest of browsers
OK, here's my solution. This will present a "common or garden" three column fixed width layout to all users and then adjust it for users with javascript enabled (which, let's face it, is the vast majority of users). The benefits of this solution are that the layout will behave like any ordinary 3 solumn layout without the quirks you can experience from using more advanced CSS tweaks like absolute positioning and fixed heights.
Fiddle here... http://jsfiddle.net/vuary/
You should be able to see what's going on with the HTML and CSS... it's basic stuff. The jQuery is pretty straight forward too:
$(document).ready(function(){
// find the width of the browser window....
var docuWidth = $(window).width();
// find the width of the central column as set by the CSS...
// (you could hard code this as 980px if desired)
var centerWidth = $('#center').width();
// figure out how many pixels wide each side column should be...
sideColWidth = (docuWidth-centerWidth) / 2;
// then set the width of the side columns...
$('#left,#right').css({
width:sideColWidth+'px'
});
})
EDIT
Converted the jQuery to a function that is called when the document is ready, and again if the viewport is resized... just in case:
http://jsfiddle.net/aKeqf/

A simple thing to ask on the CSS margin-left:auto in my case

I have a very simple nested <div> layout:
<div id="main">
<div id="options">
option 1 |
option 2
</div>
</div>
I applied a very simple CSS :
#main{
height:50px;
background-color: #cc00ff
}
/*here is the thing confused me*/
#options{
margin-left:auto;
width: 8em;
}
You can run it on jsfiddle here. Everything works fine. But there is one little thing confused me: which is, why the CSS code :
#options{
margin-left:auto;
width: 8em;
}
makes the options <div> to be located to the right side of the main <div> ? Anyone can explain to me the reason?
The reason is because you have set an auto margin on one side, which means it will just fill the space given it. I suppose this is the same sort of result as applying a float of right, but without any impact on document flow. It basically works out the automatic margin by removing the width left after the width of the contained elements.
If you wanted it centered you'd need to add an auto margin to both, with fills both sides of the parent with the width left over equally.
Why are you put the margin-left:auto; in the option DIV. The option div is gone to the right because of the margin-left. It is already left aligned. If you want the option div in the center, just need to put the margin:0 auto;
Thanks,
Arun Krishnan