Width on Container

Hello I have a panel element in my page and I want it to be wider.
I have a parent element to my div. My question is it ok to put a width
on it to make it wider? or should it be max width or could I make 100% width? PAGE

HTML:

<div class="pages-intro newsevents">
            <div id="info-wrap">
            <p id="info-box">Need more info?<br> contact us to learn <br>more about our<br> company and our<br> solutions. <br>(click below)</p>
            </div>
            <div id="contact-box"><a href="contactus.html"><button class= "contactus hvr-skew-forward" type="button"><em>Contact Us</em></button></a></div>
            <div id="newsevents-wrap"> <!-- news & events -->
                <span style="color:#1d4189;"><h1><span id="impact-italic">IMPACT-O-GRAPH DEVICES</span> Latest News & Events</h1></span>
                <span style="color:#1d4189;"><h2>*Downloadable documents available</h2></span>
                <div class="panelsnews-wrap">
                    <div class="panel panel-default newspanel">
                      <div class="panel-heading">
                        <h3 class="panel-title">RISK MANAGEMENT</h3>
                      </div>
                      <div class="panel-body">
                        Panel content
                      </div>
                    </div>
                </div> 
             </div> <!-- news end -->
        </div> 

CSS:

.panelsnews-wrap {
   width: 950px;
    
}

Sounds like you are doing that all backwards.:slight_smile:

What you need to do is give 100% width to .newsevents so that the display:table spreads the full width.

Then you need to treat immediate children of .newsevents as table-cells and as you want two columns you should have two divs and not three. Your contact-box should be inside info-wrap and info wrap set to display:table-cell (and vertical-align:top). The width on info-wrap will keep that cell the correct width and then newsevents-wrap will stretch the full 100% of the page width without the need for any width.

You should avoid forcing children to be wider than their parents unless its in a very controlled situation or you risk content that overflows being ignored in the flow.

1 Like

Now it did this it took it all the way to the other side.

I believe it is the table-layout: fixed;? should it be taken out because I am putting a width?

Also I tried it with the width in here:

.newsevents-wrap{
    display: table-cell;
    width: 100%;
    padding-left: 2em;
}

and it worked is that ok? or should always be in the parent?

Put it on the parent. :slight_smile: . Easier to track and works in every situation.

I see but then it doesnt stretch all the way for me.

Remove table-layout:fixed from “.newsevents”. That makes the cells equal width; you don’t want that.

1 Like

Yeah thats what I figured :smile:

This is probably a moving target but I don’t see display:table-cell on ‘#info-wrap’? (or vertical-align:top)

You also need width:200px on #info-wrap rather than max-width:200px and then the table-layout fixed on the parent will kick in and make it 200px width. It will not make them equal width when one cell has a width applied. Without table-layout:fixed widths can be ignored by the browser so where you want one cell sized exactly then table-layout:fixed is usually what you want.

In a lot of cases it will work with both (fixed or auto) but it all depends on what happens when content is constrained.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.table {
	display:table;
	width:100%;
	max-width:600px;
	margin:25px auto;
}
.tc {
	display:table-cell;
	vertical-align:top;
	border:1px solid #000;
}
.tc200 {
	width:200px;
	background:red;
}
.fixed {
	table-layout:fixed;
}
span{display:block;white-space:nowrap;}
</style>
</head>

<body>
<div class="table">
		<div class="tc tc200"><span>Table cell 200px width supposedly</span></div>
		<div class="tc">Fluid cell</div>
</div>
<div class="table fixed">
		<div class="tc tc200"><span>Table cell 200px width supposedly</span></div>
		<div class="tc">Fluid cell</div>
</div>

</body>
</html>

Without table-layout fixed the cell is free to grow if content pushes it wide (which in some cases may be what you want). The table-layout:fixed algorithm is also faster because it does it one pass and does not have to rely on content to lay out the cells (although speed would never be an issue unless it was a massive html table).

1 Like

I see thanks for that example.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.