CODEWITHSUNDEEP
htmlcss
bach dang
bach dang

Reputation: 185

How do I make a inline-block div occupy the rest of the space

I have a link and an inline div next to it (to the right). I want the div to occupy the rest of the space to the right. Is there a way to do that?

<a href="#">what</a><div style="display:inline-block;width:200px;border:1px solid red">hello</div>

Upvotes: 2

Views: 389

Answers (3)

Animesh
Animesh

Reputation: 1023

You can do so by applying width to both anchor tag as well as the div.

a{
   width:10%;
}
div{
   width:90%;
}

Your html would be.

<a href="#">what</a>
<div style="display:inline-block;border:1px solid red">hello</div>

Upvotes: 0

arocketman
arocketman

Reputation: 1174

You could wrap everything within a div and give it table and table cell to children:

http://jsfiddle.net/T4Qcd/

.inner{
    border:1px solid red;
    display:table-cell;
    width:100%;
}

a{
    display:table-cell;
}

.wrapper{
    display:table;
}

Upvotes: 1

j08691
j08691

Reputation: 207900

If you can wrap a span around the div, like:

<a href="#">what</a><span><div>hello</div></span>

jsFiddle example

You can apply this CSS to get what you're after:

a {
    background: #ccc;
    float: left
}
span {
    display: block;
    overflow: hidden;
    padding: 0 4px 0 6px
}
div {
    width: 100%;
    display:inline-block;
    border:1px solid red
}

Upvotes: 1

Related Questions