div width property with content - html

I have two div and they have some width. But I want each div to take full space as it's given in width property regardless of the content inside div s. Currently each div is taking space with respect to the content inside them and ignoring what is given in width property.
My HTML is given below,
<div style="margin-left:100px; display:inline; border-width:10px; width:30%; border- style:solid;">
fawad
</div>
<div style=" margin-left:10px; display:inline; border-width:10px; width:30%; border-style:solid">ali</div>

Just change your
display:inline;
to:
display: inline-block;
http://jsfiddle.net/osx76nbr/

You can use css property display:inline-block;.That is help to set div inline with block.

You need to apply a display block style. In this case I would apply
<div style="margin-left:100px; display:inline-block; border-width:10px; width:30%; border- style:solid;">
fawad
</div>
<div style=" margin-left:10px; display:inline-block; border-width:10px; width:30%; border-style:solid">ali</div>
Alternatively I would apply all of these settings to a style sheet and apply a class to the div instead of having inline styles like this.
.inline-div {
display: inline-block;
border: 10px solid;
width: 30%;
}
<div class="inline-div"></div>
Even better is I would look into a grid system much like the ones found in bootstrap or foundation. That way you can just apply the grid styles.
<div class="row">
<div class="col-4">
<div class="col-4">
<div class="col-4">
</div>

Only thing that was needed
display:inline-block;
That's it

Try adding
div { float:left }
That will make the divs respect the with property.

Related

Two Inline-Blocks not aligning

I have two div inside a container div: JS Fiddle Link
<div id="container">
<div class="leftContainer">
Left
</div>
<div class="rightContainer">
<h3>Right</h3>
</div>
</div>
But I am not sure why they do not align both to top or anywhere with same alignment with this CSS:
div#container{vertical-align:top;background:#e4e4e4}
div#container div{
display:inline-block;
width:200px;
height:50px;
}
div#container div.leftContainer{background:#999}
div#container div.rightContainer{background:#555}
add vertical-align:top; for the child of #container div
div#container div{
vertical-align:top;
}
You have Right inside a <h3> tag, which is adding margin to the tag (which in turn pushes the Right heading down slightly)
Either set both Left and Right to be inside header tags, or remove the one for Right, and they will display the same.
<div id="container">
<div class="leftContainer">
Left
</div>
<div class="rightContainer">
Right
</div>
</div>
And your CSS can be left as it is
div#container{vertical-align:top;background:#e4e4e4}
div#container div{
display:inline-block;
width:200px;
height:50px;
}
div#container div.leftContainer{background:#999}
div#container div.rightContainer{background:#555}
Set float left in the first div to force the align and remove the hr or add the hr to both
div#container{vertical-align:top;background:#e4e4e4}
div#container div{
display:inline-block;
width:200px;
height:50px;
}
div#container div.leftContainer{background:#999; float:left;}
div#container div.rightContainer{background:#555}
<div id="container">
<div class="leftContainer">
Left
</div>
<div class="rightContainer">
Right
</div>
</div>
Just add css:
div#container { float:left;}
div#container div{
float: left;/*remove inline block and add float left to align your div*/
width:200px;
height:50px;
}
SEE DEMO:http://jsfiddle.net/JentiDabhi/x21nv0gm/
if you're able to use external frameworks I'd suggest you using Twitter Bootstrap and use its grid system to align stuff simply by doing somenthing like:
<div class="container">
<div class="row">
<div class="specify column sizes">
Left
</div>
<div class="specify column sizes">
<h3>Right</h3>
</div>
</div>
</div>
Using Bootstrap and specifying your choosen column sizes (col-sm-N, col-md-N, col-xs-N, col-lg-N) instead of using a fixed 200px width allows you to make your page change it's behaviour on different display sizes using only CSS
To retain the display inline-block property, without using floats - you could turn the h3 into an inline element by adding the below CSS:
h3 {display:inline;}
Add vertical-align:top; for the child of #container div
div#container div{
vertical-align:top;
}
And to retain the display inline-block property, without using floats - you could turn the h3 into an inline element by adding the below CSS:
h3 {display:inline;}

trying to get a 3rd div to "float over" 2 divs which are "float left" and "float right"

I have 2 divs, one floating left(#div1) and the other floating right(#div2). I need to add a third div(#div3) which floats centrally over these. I am currently trying to use the z-index. However I am getting some strange effects like the div1 and div2 being forces down. Also the "container" div centrally aligns all child divs.
So for some code:
<div id="container" style="width: 980px;margin-left: auto;margin-right: auto; height:130px">
<div id="div1" style="float:left">Div1</div>
<div id="div2" style="float:right">Div1</div>
<div id="div3" style="border:1px solid black;colour:black;position:relative; top:0px, left:auto; z-index:1000">I look like a button and I float the other divs, in a central location</div>
</div>
I would really appreciate some guidance on the correct code for the above, to ensure that #div3 does float over #div1 and #div2, and is centrally located.
Thanks in advance.
First of all, the style attribute on 3rd div isn't closed.
Use ; to separate between style statements in the style attribute. And its color, not colour
I would also suggest using a css
Heres a codepen:
http://codepen.io/Vall3y/pen/QwWPYd
If you want the container to float in the center, its enough to give it margin: auto
Giving the 3rd div a width and auto margin will get your desired result I would assume. I also removed some unnecessary statements like position relative
#div3 {
border:1px solid black;
color:black;
margin: auto;
width: 30%;
}
Heres a codepen:
http://codepen.io/Vall3y/pen/gbOyEb
Also consider using display: flex and ditch the floats altogether
http://codepen.io/Vall3y/pen/ogNOVV
If you want to read more on flexbox I recommend the csstricks article http://css-tricks.com/snippets/css/a-guide-to-flexbox/
I think you need to add to #div3 display property: inline-block, and set text-align: center to #container, check it out here
No relative or absolutely positioned elements needed! This should give you what you want:
CSS:
#container{width: 580px; border:2px solid orange; height:350px;}
#div1{border:2px solid blue; width:260px; height:100px; float:left;}
#div2{border:2px solid green; width:260px; float:right; height:100px;}
#div3{border:1px solid black; width:100%; float:left; height:100px;}
HTML:
<div id="container" >
<div id="div3">I look like a button and I float the other divs, in a central location</div>
<div id="div1">Div1</div>
<div id="div2">Div3</div>
</div>
Heres a live demo:
http://jsfiddle.net/Lza5fz43/
You really should separate your CSS and HTML, but this is what I did...
Add width:inherit to your div3 and position:absolute:
<div id="container" style="background-color:lightgrey;width: 480px;margin-left: auto;margin-right: auto; height:130px">
<div id="div1" style="float:left">Div1</div>
<div id="div2" style="float:right">Div1</div>
<div id="div3" style="border:1px solid black;colour:black; top:0px, left:auto; z-index:1000; position:absolute; width:inherit;">I look like a button and I float the other divs, in a central location</div>
</div>
You can modify the width to adjust where you want div3 to land and therefore can center it between them if you want.
Working JSFiddle: http://jsfiddle.net/re2hkbgh/1/
If this isn't exactly what you want just play with the width to get the effect you want as this is the positioning you are asking for! :)

5 same size elements, on the same line, with margin

I have an issue and I can't find the right keywords on Google.. But it seems prettry "classic".
I have a webpage, let's say with a max-width of 1500px;
I want to add a line, with 5 "boxes" (div) of the same size each, separated with a margin.
So I set a width of 20%, and a margin-right of 10px. My issue is that my last div always goes down to the next line, because of the margin. (Because with the margin, the width of my line is higher than the max-width of the page).
If I remove the margin, all the boxes are correctly on the same line.
What should I do to make it work ? (Except using outerWidth of jQuery, it is my next step if I can't do it easily with css)
Here is my code the code I have now :
<div id="page">
<div id="numbers">
<div class="numberwrap">
<div class="number">
Number
</div></div>
<div class="numberwrap">
<div class="number">
Number
</div></div>
<div class="numberwrap">
<div class="number">
Number
</div></div>
<div class="numberwrap">
<div class="number">
Number
</div></div>
<div class="numberwrap">
<div class="number">
Number
</div></div>
</div>
</div>
#page
{
max-size: 500px;
background-color:grey;
}
.number
{
background-color:white;
}
.numberwrap
{
float:left;
width:20%;
padding-right:10px;
}
I also made a fiddle, to test : http://jsfiddle.net/jKMp5/
Thank you !
Solution : I just have to set the padding property on the .number, not the wrapper !
Or use box-sizing !
Thanks to everybody
Div's with a width percentage adds margins and paddings width on to that.
Meaning a div with width 50% amd margin-right: 20px; will be 50% + 20px.
You can do the following.
<div style="width: 20%;">
<div style="margin-right: 20px;"></div>
</div>
That will sort it out.
or just the following
.number
{
background-color:white;
padding-right:10px;
}
.numberwrap
{
float:left;
width:20%;
}
The problem is (as you already said) that the margin is affecting to each div making it bigger than that 20%, so one solution could be to tell to that div that the margin is included in the total width with the property box-sizing
So add:
.numberwrap {
box-sizing: border-box;
}
See jsFiddle example: http://jsfiddle.net/jKMp5/2/
In the default box modal,
The padding area extends the content area with the empty area between the content and the eventual borders surrounding it.
You can change this behavior using box-sizing property by applying box-sizing:border-box
border-box:
The width and height properties include the padding and border, but not the margin.
.numberwrap
{
box-sizing:border-box;
/*other styles*/
}
Demo
You can use disaply:table and display:table-cell:
css
#page
{
max-size: 500px;
background-color:grey;
}
.number
{
background-color:white;
}
.numberwrap
{
float:left;
width:20%;
padding-right:10px;
display:table-cell;
/*border: 1px solid black;*/
}
#numbers{
display:table;
}
fiddle

Simple HTML rendering issue

I'm having a doubt in the basics of the HTML rendering. I'm having the following HTML/CSS.
http://jsfiddle.net/cgZ4C/2/
<style type="text/css">
.outer
{
background-color:#DADADA;
width:400px;
border:1px solid silver;
margin:auto;
min-height:50px;
padding:10px;
}
.content
{
float:left;
width:196px;
min-height:20px;
background-color:#BABABA;
margin:2px;
}
</style>
<div class="outer">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div>
Why is the outer div not growing when the inner content grows? Even I tried adding some text inside .content divs. But still the .outer div is not growing?
You need to add overflow property to your outer div and assign proper value to it like
overflow:hidden
Find what is the most suitable for your need here
Here is the possible code change you need:
.outer
{
background-color:#DADADA;
width:400px;
border:1px solid silver;
margin:auto;
min-height:50px;
padding:10px;
overflow:hidden;
}
CLEAR YOUR FLOATS! Always :-)
Add overflow:auto; like in this code: http://jsfiddle.net/cgZ4C/3/
Many CSS frameworks these days use a class clearfix . That has become the de facto standard. Twitter bootstrap uses it as well. What we need to do is just add a class clearfix to the outer div and you'll be done :)
Although Clearing floats is the correct way to go, sometimes, there is another way you can do this:
float your outer div too!!!
.outer {
float: left;
}
This way, the outer will respect the floated children and expand, but you'll need to float the parent div of outer too, and so on, until there is a ancestor div which is cleared/<body> is encountered.
All floats are like bro's so go along with each other much better than non-floated non-cleared divs.
:)
Add attribute overflow: hidden to the .outer style.
It doesn't grow because all of your content within the parent is floated. When an element is floated, it is no longer taken into consideration by the parent when it calculates it's total size. Since every element is floated, as far as the parent is concerned there is no content, so it doesn't resize.
Your code looks like a table so, with display:table (source) the element will behave like a table element.
http://jsfiddle.net/eWwtp/
.outer
{
background-color:#DADADA;
width:400px;
border:1px solid silver;
margin:auto;
min-height:50px;
padding:10px;
display:table
}
Another solution, that avoid these issues:
But with overflow hidden, more issues can arise where items outside of that div are hidden, or cut off (usually with menus etc).
http://jsfiddle.net/4LqaK/
Add:
<div class="clear"></div>
.clear{clear:both}

Overflowing a container div horizontally but not vertically

I'm working on a website that uses two columns inside a container. The container has a white background that should stretch to the bottom of whichever column is highest, so I'm using the holy grail method for that.
However, both columns should positioned so that a part of it exceeds the white background (this example uses a fixed height, which should be fluid). As far as I know, this can only be done by setting the overflow to visible but this break the equal height of the columns.
How do I fix this with as little additional elements as possible?
The easiest fix in this case seems to be adding <br style="clear:both" /> before the closing tag for #container.
You can change it to <br class="clearfix" /> and .clearfix{clear:both} if you wish.
Solution is to use inline-block elements..
Css
.container{
width:300px;
background-color:#ccc;
margin:0 auto;
border:1px solid red;
}
.container > div{
width:150px;
display:inline-block;
vertical-align:top;
}
.inner{
background-color:#666;
margin-top:10px;
width:130px;
}
.left .inner{
margin-left:-10px;
}
.right .inner{
margin-right:-10px;
margin-left:auto;
}
HTML
<div class="container">
<div class="left">
<div class="inner">left 1st inner panel</div>
<div class="inner">left 2nd inner panel</div>
</div><div class="right">
<div class="inner">right 1st inner panel</div>
<div class="inner">right 2nd inner panel with arbitrary text to show the increase in parent elements</div>
</div>
</div>
view demo