Why is the design/layout breaking → Click Here
I just removed the content from this HTML arrangement →
<div class="main col">
</div>
we have given width and margins to the sidebar and the main content area then why the disaster.
while when there is full content the design is not breaking?
In the meanwhile, I just tweaked in the browser and find that If I set →
.content {width:100%;} Problem seems to be fixed, but I do not know if this is a genuine fix. but what astonishes me is this though there was no content in the main div, but why was sidebar shrinking?
Sometimes words alone are just not enough. In such cases, an annotated screen shot or two can help focus our attention on the issue.
???
.content {
overflow: hidden;
display: table;
}
.content looks like to be parent elements to the sidebar and main content area. Can we safely remove display: table;
or display: table; is essentially required at this parent level.
Alternatively, I also tried.content {width:100%;}
which one is the right fix?
Sometimes it’s helpful to describe just how the page is broken and at what width(s). Sorry, I haven’t been following your threads so I had to do some catching up.
The short answers: “display:table;width:100%” or “overflow:hidden” looks like they work OK.
A table is a shrink-to-fit element, like floats or inline-blocks. Tables are usually used in this situation to create equal height columns. If the table needs to be the full width of the page or other containing element, then the display:table should be assigned a width of 100% and one of the columns might be assigned a percent width as you have done. That other column will adopt the remaining space. One should not try to use overflow:hidden with a table. It’s pointless. Table’s normally extend or cell widths self-adjust. Tables don’t normally overflow. If they do, something’s wrong. 
This is the code →
<p>
<img src="http://heightandweights.com/wp-content/uploads/2014/10/Beautiful-Lindsey-Vonn.jpg" alt="The Pulpit Rock" width="304" height="228" style="padding-right:30px;">
<strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
You can see that above the text and on the right-hand side of the image space is vacant.
https://www.screencast.com/t/SJcXmLon9jvA
I Know only the old school method that is by putting float: left on the image. In that case, do we have to put clear fix? is there any other method other than float to accomplish this?
I tried the flex method and it worked for me →
<div class="flex-media">
<img src="http://heightandweights.com/wp-content/uploads/2014/10/Beautiful-Lindsey-Vonn.jpg" alt="The Pulpit Rock" width="304" height="228">
<p>
<strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
CSS →
/*Front Page*/
.flex-media {
display: flex;
}
.flex-media p {
margin: 0;
}
.flex-media img {
margin-right: 20px;
}
I’ll be with you in a minute. Finishing now.
Do you really want the text in one column and the image in another?
Try this working page (uses float)::
Yes, and I realized it while watching this video that flexbox is quite good at that.
You can also use Laracast Videos if you want to learn PHP; their basic courses are free you just need an account. Thank you for sharing that HTML file.
I need your help in one more thing →
I am using this CSS
.line-separator: last-child {
border-bottom: 0px solid;
}
to get rid of the last separator line, but looks like I am doing some mistake.
The following works for me:
.line-separator:last-child {
border-bottom:none;
}
Hmm. worked for me also. Thanks!
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.