Jacob Ewing Jacob Ewing - 2 months ago 7
CSS Question

how to affect an element's width by one child element but not others using CSS

As the title describes, I would like find a CSS means of making one element's width affect its parent element's width, but force other children of that parent to fit within that width.

Here's the code I'm using:

<div id="leftToolBar" class="toolbar">
<div id="canvasHolder"></div>
<div>
<a id="tool_pencil" onclick="setTool('pencil'); return false;" href="#" class="currentTool"><img src="images/pencil.png"/></a>
<a id="tool_paintbrush" onclick="setTool('paintbrush'); return false;" href="#"><img src="images/paint.png"/></a>
<a id="tool_floodfill" onclick="setTool('floodfill'); return false;" href="#"><img src="images/bucketfill.png"/></a>
<a onclick="transform('shiftleft'); return false;" href="#"><img src="images/left.png"/></a>
<a onclick="transform('shiftright'); return false;" href="#"><img src="images/right.png"/></a>
<a onclick="transform('shiftdown'); return false;" href="#"><img src="images/down.png"/></a>
<a onclick="transform('shiftup'); return false;" href="#"><img src="images/up.png"/></a>
<a onclick="transform('rotleft'); return false;" href="#"><img src="images/rotateleft.png"/></a>
<a onclick="transform('rotright'); return false;" href="#"><img src="images/rotateright.png"/></a>
<a onclick="transform('diagonal1'); return false;" href="#"><img src="images/dflip1.png"/></a>
<a onclick="transform('diagonal2'); return false;" href="#"><img src="images/dflip2.png"/></a>
<a onclick="transform('vflip'); return false;" href="#"><img src="images/vflip.png"/></a>
<a onclick="transform('hflip'); return false;" href="#"><img src="images/hflip.png"/></a>
<a onclick="toggleGrid(); return false;" href="#"><img src="images/grid.png"/></a>
</div>
</div>


And here is the relevant css (thus far):

.toolbar a{
display: inline-block;
width: 20px;
height: 20px;
text-align: center;
line-height: 24px;
border-radius: 0.2em;
padding: 3px;
border: 1px solid #AAA;
}

.toolbar a.currentTool{
box-shadow:-1px -1px 1px 1px rgba(0,0,0,0.5) inset, 1px 1px 1px 1px rgba(255, 255, 255, 0.8) inset;
border: none;
}

#canvasHolder {
background-color: #a0a0a0;
border: 1px solid #777470;
}

#canvasHolder canvas{
border: 1px solid #666;
background: repeating-linear-gradient(
45deg,
#CCC,
#CCC 2px,
#CCC 4px,
#AAA 6px
);
display: inline-block;
vertical-align: center;
}


This of course is not doing what I want. I would like the "canvasHolder" div to determine the size of that toolbar beyond a certain minimum, and for the anchors in the div below it to populate the area below, but without affecting the width of the "leftToolBar" div.

Is there some combination of CSS attributes I can apply here (aside from a hard-coded "max-width" number) that will give me that effect?

Answer

<div id="leftToolBar" class="toolbar">
<div id="canvasHolder"></div> 
<div>
        <a class="currentTool"><img src="images/pencil.png"/></a>
        <a><img src="images/paint.png"/></a>
        <a><img src="images/bucketfill.png"/></a>
        <a><img src="images/left.png"/></a>
        <a><img src="images/right.png"/></a>
        <a><img src="images/down.png"/></a>
        <a><img src="images/up.png"/></a>
        <a><img src="images/rotateleft.png"/></a>
        <a><img src="images/rotateright.png"/></a>
        <a><img src="images/dflip1.png"/></a>
        <a><img src="images/dflip2.png"/></a>
        <a><img src="images/vflip.png"/></a>
        <a><img src="images/hflip.png"/></a>
        <a><img src="images/grid.png"/></a>
</div>
</div>
<style>
.toolbar {
		background-color: green;
		width: min-content;
		display: flex;
		flex-wrap: wrap;
}

.toolbar a {
        display: inline-block;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 24px;
        border-radius: 0.2em;
        padding: 3px;
        border: 1px solid #AAA;
}

.toolbar a.currentTool{
        box-shadow:-1px -1px 1px 1px rgba(0,0,0,0.5) inset, 1px 1px 1px 1px rgba(255, 255, 255, 0.8) inset;
        border: none;
}

#canvasHolder {
        background-color: #a0a0a0;
        border: 1px solid #777470;
		width: 100px;
		height: 150px;
}
</style>

Does this accomplish what you are looking for?