I have a div called text, and next to it I want a button which should take up the remaining width of the screen so I set the width of the button to 100%, but it takes that as 100% of the screen and appears below the text div. How can I make it so the button is 100% the width of its parent div and not the whole screen so it all appears on the same line, without setting a width for the text div? Here is a demo. Thank you.
css
#text{
float:left;
}
div{
border:1px solid red;
}
button{
width:100%;
}
html
<div id = "text">text</div>
<div>
<button>button</button>
</div>
You should be able to achieve this using display: table-cell css:
Try something like this: DEMO
<div class="container">
<div class="cell" id="text">text</div>
<div class="cell">
<button>button</button>
</div>
</div>
div.container {
width: 100%;
display: table;
}
div.cell {
border:1px solid red;
display: table-cell;
}
button {
width:100%;
}
/* use this style to set width of the #text cell to exactly the width of it's cotnents */
#text {
width:1%;
white-space: nowrap;
}
You can place them in a div together and display them as flex.
http://jsfiddle.net/1amvwzuw/2/
<div class="flex">
<div id="text">text</div>
<button>button</button>
</div>
You need to give your parent container a width. So text could be like, 80% then the div that contains button could be 20%. then button will be 100% of the parent div and both divs will be beside each other.
So div element is a block element. That means it will start on a new line and the next element after it will be on a new line as well. What you can do here is to set display: inline-block to both divs you have.
If you don't need a block element just use an inline one like span
http://jsfiddle.net/1amvwzuw/3/
If your browser-matrix allows it this is the perfekt opportunity to try out flexbox:
html
<div class="wrapper">
<div id="text">text</div>
<div class="button-wrapper"><button>button</button></div>
</div>
css
.wrapper{
display: flex;
}
.button-wrapper{
flex: 1;
}
button {
width: 100%;
}
http://jsfiddle.net/1amvwzuw/5/
if not look at this question to see how to stretch a div using display:table-cell:
Auto-stretching table-cell div css
Related
How can i have my SVG image on the same line of my text in an inline-block container ?
In the above example, I want my picture let at the right of my text, on the same line but browser automaticaly break line.
.container{
display: inline-block;
background:orange;
}
<div class=container>
text<img src="https://res.cloudinary.com/aquis/image/upload/v1521481254/site-2018/megaphone-picto.svg">
</div>
Simply specify a width and/or a height to the image:
.container{
display: inline-block;
background:orange;
}
<div class=container>
text<img src="https://res.cloudinary.com/aquis/image/upload/v1521481254/site-2018/megaphone-picto.svg" width="20">
</div>
Remove display: inline-block from your .container class and set the inline-block on your image. Since it is an svg, you will also want to give the svg an explicit height and width.
It's recommended to wrap the img in a span tag, instead of setting it to the img html element, which would set the same small size on all image items on your site. I gave the span the classname of svg-image, but you could name it anything else.
.container{
background:orange;
}
.svg-image {
display: inline-block;
height:20px;
width: 20px;
}
<div class=container>
text<span class="svg-image"><img src="https://res.cloudinary.com/aquis/image/upload/v1521481254/site-2018/megaphone-picto.svg"></span>
</div>
I have two divs next to each other that are displayed using inline-block. As the viewport shrinks, I'd like the text in the leftmost div to wrap before the divs collapse vertically, but I can't seem to make that happen. JSFiddle here.
In the demo, when the viewport shrinks "Should stay in block" is pushed below the title block, whereas I'd like the "Lots of text I want to wrap" to start wrapping to keep the two blocks on the same line.
Use display: table-cell; Instead of display:inline-block will solve your issue.
.title {
display: table-cell;
vertical-align: top;
}
.box {
display: table-cell;
vertical-align: top;
}
<div class="title">
<h1>Hi</h1>
<h2>Lots of text I want to wrap</h2>
</div>
<div class="box">
Should stay in a block
</div>
Check your updated Fiddle Here.
Can't you make them to fill the body or the container giving them a 50% width?
JSfiddle
EDIT: JSfiddle with a wrapper
.title {
display: inline-block;
vertical-align: top;
background-color:red;
width:50%;
}
.box {
display: inline-block;
vertical-align: top;
background-color:blue;
width:50%;
}
<div class="title">
<h1>Hi</h1>
<h2>Lots of text I want to wrap</h2>
</div><div class="box">
Should stay in a block
</div>
Edit: remember to not wrap after the first div, and make sure that there are not spaces </div><div class="box"> so you can use 50% preserving the inline-block
I don't know how to phrase my problem
but here is my issue
i have a outer div of size 900px
and inside that div i have 8 inner div each of size 250px
so on each line i can have only 3 div and the rest of div has to come on next line but i am not getting how to do this.
here is my code
<div class="big">
<div class="wrapper">
<div></div>
</div>
....some more div
....
</div>
and here is my css code
.big{
display:-webkit-box;
width:900px;
}
.wrapper {
width: 250px;
height: 250px;
background-color:red;
margin-right:2px;
}
jsfiddle
please help me with this
Add display: inline-block; into style of wrapper class.
this is my html (for example)
<div id="wrap">
Some relative item placed item
<div id="fixed">hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii</div>
</div>
here is my css:
#wrap{
float: left;
position: relative;
width: 80%;
background:#ccc;
}
#fixed{
width:inherit;
}
I want to make the second div that is 'fixed' to have same width as the first 'wrap'. I tried a lot, but i can't do it.
Is it possible to do this without any javascript?
Any suggestion..please.
here is the fiddle for this:
http://jsfiddle.net/sris/tktdf1kk/
You need to leave your width alone. Divs already expand 100% of their containing div. The reason your text is not wrapping is because it's all one word. Add the CSS:
#fixed {
word-wrap: break-word;
}
this might be dumb but I'm kinda new to html and css.
I have..
<div>
<img src="#" alt="img">
<p>Lorem ipsum</p>
</div>
css:
div {
background: blue;
}
div img {
float: left;
}
that makes the div background width take all the available space (to the end of the page), what I want is for the div blue background to end on its child elements ending.
I'm not exactly familiar with the block/inline. but applying inline to the div makes the background disappear, applying block does nothing. so what do I do to achieve what I'm looking for?
By default div elements are displayed as blocks. By default blocks stretch to 100% of their container's width. As you've mentioned, setting them to display as inline will make them stretch to their content's width, however there is a mid-way point between inline and block: inline-block:
div {
display:inline-block;
}
JSFiddle demo.
use an inline-block
div {
background: blue;
display:inline-block
}
div img {
float: left;
}
Try this:
div {
background: blue;
display: inline-block;
}
div img {
float: left;
}