I have this html code
<section id="sec" style="height:auto">
<div id="wrap">
<div id="con">
<h1>....</h1>
<div id="col1">
<p>... long texts ...</p>
</div>
<div id="col2">
<p>... long texts ...</p>
</div>
</div>
</div>
</section>
<div id="buttom" style="border-top: 1px solid rgb(153, 153, 153)">
<p>...text here ... </p>
</div>
my problem now is that the height:auto of section#sec did not work in many divs inside of it...
is there any way that wihout removing any divs, the height auto will be work?
height is not a property inherited from parent elements. If you want the divs inside section#sec to inherit this property, you need to make a selector for it in CSS (or set inline styles on each one manually).
section#sec div
{
height:auto;
}
But since height:auto is already the default, you may be looking for something else entirely.
Related
I'm trying to create a partial view for my home work and I have approximately done that, but there is one issue that is annoying me: Overflow-Y is not working in any case. I tried to set the height of my DIV tag in % and also in PX but in both cases it doesn't work.
I want to add the scroll option when content overflows the height of the nested DIV tag.
<div id="MainDIV" style="height:100%;width:100%;">
<div id="Header" style="width:100%;height:30px;text-align:center;background-color:#0094ff;padding:20px 0;font-size:25px">Welcome To my web site</div>
<div id="SideMenu" style="width:20%;background-color:#4cfbf6;display:table-cell;overflow-y:auto">Side Menu</div>
<div id="Content" style="width:80%;height:70%;background-color:orange;display:table-cell;padding:5px 10px;font-size:18px;overflow-y:auto">#RenderBody()</div>
<div id="Footer" style="width:100%;height:20px;background-color:#4cff00;text-align:center; padding:5px 0 ">Copyright © Someone Who developed it</div>
</div>
But this is not working at all, I even tried to set the height in PX. The height of DIV increase as content is added to the body.
table-cell don't seems to support overflow, so you need to add a child and set its height ( and set its overflow-y ).
<div id="MainDIV" style="height:100%;width:100%;">
<div id="Header" style="width:100%;height:30px;text-align:center;background-color:#0094ff;padding:20px 0;font-size:25px">Welcome To my web site</div>
<div id="SideMenu" style="width:20%;background-color:#4cfbf6;display:table-cell;overflow-y:auto">Side Menu</div>
<div id="Content" style="width:80%;background-color:orange;display:table-cell;padding:5px 10px;font-size:18px;">
<div style="height:200px;overflow-y:auto;">#RenderBody() -> "xxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br>xxxxxxxxxxxxxxxxxxxxxx
<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br>xxxxxxxxxxxxxxxxxxxxxx
<br>xxxxxxxxxxxxxx
<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br>xxxxxxxxxxxxxxxxxxxx
<br>xxxxxxxxxxxxxxx
<br>xxxxxxxxxxxxxxxxxxx
<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br>xxxxxxxxx"</div>
</div>
<div id="Footer" style="width:100%;height:20px;background-color:#4cff00;text-align:center; padding:5px 0 ">Copyright © Someone Who developed it</div>
</div>
I'm trying to set some divs to width: 100% on Twitter Bootstrap 3 (including no paddings or margins).
JSfiddle: http://jsfiddle.net/rq9ycjcx/
HTML:
<div class="container">
<header>
<div class="row">
<div class="col-md-2">
<img src="http://placehold.it/150x50">
</div>
<div class="col-md-10">Menu</div>
</div>
<div class="row gray">
<div class="col-md-6">
<h1>Page Title</h1>
</div>
<div class="col-md-6">
<div class="breadcrumbs">Main page > page </div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/350x150" />
</div>
</div>
</header>
<footer>
<div class="row">
<div class="col-md-12">Content</div>
</div>
<div class="row dark">
<div class="col-md-3">Footer 1</div>
<div class="col-md-3">Footer 2</div>
<div class="col-md-3">Footer 3</div>
<div class="col-md-3">Footer 4</div>
</div>
</footer>
</div>
What is the right way to get image http://placehold.it/350x150 width: 100%, including no paddings or margins?
Page title and breadcrumbs height is 80px.
If I resize window to smaller screen (e.g. mobile), text Main page > page disappears (it's somewhere but not on own row).
How to fix it?
Use <div class="container-fluid">. As per Bootstrap Docs: Use .container-fluid for a full width container, spanning the entire width of your viewport.
There is 0 padding on container-fluid.
In your code you have what appears to be body content in your header and you also have a div class="container" outside of your header and footer. This is not correct, you should have your container/container-fluid inside of your body. Also for your header you should use <nav="nav navbar-nav">.
Updated Fiddle
As suggested above, you can create a helper class
.padding-0 {
padding: 0;
}
and apply it to any HTML elements for which you need a padding reset. So in your case, it would look like this:
<div class="row">
<div class="col-md-12 padding-0">
<img src="http://placehold.it/350x150" />
</div>
</div>
For the second problem, set height of .gray class to auto :
#media () {
.gray {
height: auto;
}
}
Note: You could also remove line-height: 80px, it's optional :)
http://jsfiddle.net/rq9ycjcx/8/
There is no "right" way to do that in Bootstrap 3. It means you have to reset padding for the exact column.
You can create a class such as this one:
.col-md-12.resetPadding { padding:0px }
About Main page > page disappearing, I don't see this problem on my browsers (tested on Chrome and FF), but you have line-height: 80px there and as you said your breadcrumbs div has height: 80px;, so try to reduce line-height property and see how it works.
A simple way would be to remove the <div class="col-md-12">...</div> and add your content directly inside the row tag. The row tag removes the left & right gutters, whereas the cold-md-12 essentially adds the gutters back in.
The Bootstrap 3 documentation says that for single full width items you don't need any markup, eg just wrap it in <p> tags. However this will show the 15px gutters due to the page markup. So by simply adding in the row tag and placing your content directly inside this you will get 100% width content and be compliant with the BS3 documentation.
I have a DIV that I want to use to display some formatted content in. However, I have problems with some text TAGs inside the DIV.
You can see my problem in jsfiddle.
Can you please help me solve this?
I need the content of the second "column" to be able to word-wrap and when it would do that, I want the next "line" to be moved down so it would not overlap it.
Basically I want to text to look normal inside the DIV.
<div class="container-right">
<div class="topul" style="background-color:#2ecc71; width:352px;"></div>
<div class="parent" style="min-width:350px; width:350px; height:445px;">
<p class="myp" style="color:#2ecc71; font-size:2em; margin-bottom:0px"> <b>Worker information</b>
</p>
<div class="topul2" style="float:left; background-color:#2ecc71;"></div>
<div class="d-table">
<div class="d-tablerow">
<div class="d-tablecell" style="text-align:right; width:30%">
<p class="myp3" style="color:#2ecc71">Name:
<p>
</div>
<div class="d-tablecell" style="text-align:left; width:70%;">
<p class="myp4" style="color:#2ecc71"><b>Some name</b>
</p>
</div>
</div>
<div class="d-tablerow">
<div class="d-tablecell" style="text-align:right; width:30%">
<p class="myp3" style="color:#2ecc71;">Address:</p>
</div>
<div class="d-tablecell" style="text-align:left; width:70%;">
<p class="myp4" style="color:#2ecc71; display:inline-block"><b>Here goes a long text as address that does not word-wrap and exits the DIV</b>
</p>
</div>
</div>
<div class="d-tablerow">
<div class="d-tablecell" style="text-align:right; width:30%">
<p class="myp3" style="color:#2ecc71">Other info:</p>
</div>
<div class="d-tablecell" style="text-align:left; width:70%;">
<p class="myp4" style="color:#2ecc71; "><b>Here is other information</b>
</p>
</div>
</div>
</div>
</div>
</div>
You can see the CSS in the jsfiddle link above.
I give up... I am a newbie with CSS and HTML and so far this is done manually by me after digging on google. But now I have no idea how to solve this.
Please help.
Thanks
The problem is with your .myp4 styles
To avoid the overlap remove height: 2px;
To avoid bleeding from the div set max-width: 200px;
As mentioned above set heights are a bit of a nightmare unless you're going for a specific look. It's better to use min-height or max-height
NOTE: You should seriously split all your CSS into a separate file rather than having them in the elements
Also is there a particular reason for you to use crazy displays? You could achieve the same effect easily by having a div wrapping two other divs that are float left. display: block; will give you less of a hard time if you're a newbie. Aim for less code, not more.
Try setting min-height instead of height on the rows and/or cells.
The width of the table is the culprit, it's allowing its children to run wild on your page. .d-table {
width: 350px;
}
How can I solve this problem?
When you add borders to a div, the div is not centered and
the span12 class is not centered.
I would like to center the div with the borders
<div class="row" >
<div class="span12" style="border: 2px solid black">
<div class="row">
<div class="span4">
1
</div>
<div class="span4">
2
</div>
<div class="span4">
3
</div>
</div>
</div>
</div>
Unfortunately, that's what borders do, they're counted as part of the space an element takes up. Allow me to introduce border's less commonly known cousin: outline. It is virtually identical to border. Only difference is that it behaves more like box-shadow in that it doesn't take up space in your layout and it has to be on all 4 sides of the element.
http://codepen.io/cimmanon/pen/wyktr
.foo {
outline: 1px solid orange;
}
As of Bootstrap 3, you can use Panel classes:
<div class="panel panel-default">Surrounded by border</div>
In Bootstrap 4, you can use Border classes:
<div class="border border-secondary">Surrounded by border</div>
There's a property in CSS called box-sizing. It determines the total width of an element on your page. The default value is content-box, which doesn't include the padding, margin, or border of the element.
Hence, if you set a div to have width: 500px and 20px padding all around, it will take up 540px on your website (500 + 20 + 20).
This is what is causing your problem. Bootstrap calculates set widths for things just like the above example, and these things don't have borders. Since Bootstrap fits together like a puzzle, adding a border to one of the sides would yield a total width of 501px (continuing the above example) and break your layout.
The easiest way to fix this is to adjust your box-sizing. The value you would use is box-sizing: border-box. This includes the padding and border in your box elements. You can read more about box-sizing here.
A problem with this solution is that it only works on IE8+. Consequently, if you need deeper IE support you'll need to override the Bootstrap widths to account for your border.
To give an example of how to calculate a new width, begin by checking the width that Bootstrap sets on your element. Let's say it's a span6 and has a width of 320px (this is purely hypothetical, the actual width of your span6 will depend on your specific configuration of Bootstrap). If you wanted to add a single border on the right hand side with a 20px padding over there, you'd write this CSS in your stylesheet
.span6 {
padding-right: 20px;
border-right: 1px solid #ddd;
width: 299px;
}
where the new width is calculated by:
old width - padding - border
Depending what size you want your div to be, you could utilize Bootstrap's built-in component thumbnail class, along with (or without) the grid system to create borders around each of your div items.
These examples on Bootstrap's website demonstrates the ease-of-use and lack of need for any special additional CSS:
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
which produces the following div grid items:
or add some additional content:
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>
Button
Button
</p>
</div>
</div>
</div>
</div>
which produces the following div grid items:
What others have mentioned about border vs border box is definitely correct. You can still get this to work without having to create any custom classes though: http://jsfiddle.net/panchroma/yfzdD/
HTML
<div class="container">
<div class="row" >
<div class="span12">
<div class="row">
<div class="span4"> 1 </div>
<div class="span4"> 2 </div>
<div class="span4"> 3 </div>
</div><!-- end nested row -->
</div><!-- end span 12 -->
</div> <!-- end row -->
</div><!-- end container -->
CSS
.span12{
border:solid 2px black;
background-color:grey;
}
Good luck!
While it's probably not the correct way to do it, something that I've found to be a simple workaround is to simply use a box-shadow rather than a border... This doesn't break the grid system. For example, in your case:
HTML
<div class="container">
<div class="row" >
<div class="span12">
<div class="row">
<div class="span4">
1
</div>
<div class="span4">
2
</div>
<div class="span4">
3
</div>
</div>
</div>
</div>
</div>
CSS
.span12{
-moz-box-shadow: 0 0 2px black;
-webkit-box-shadow: 0 0 2px black;
box-shadow: 0 0 2px black;
}
Fiddle
You can't just add a border to the span because it will break the layout because of the way width is calculate: width = border + padding + width. Since the container is 940px and the span is 940px, adding 2px border (so 4px altogether) will make it look off centered. The work around is to change the width to include the 4px border (original - 4px) or have another div inside that creates the 2px border.
If you need a basic border around you just need to use bootstrap wells.
For example the code below:
<div class="well">Basic Well</div>
If you are using Bootstrap 4 and higher try this to put borders around your empty divs use border border-primary here is an example of my code:
<div class="row border border-primary">
<div class="col border border-primary">logo</div>
<div class="col border border-primary">navbar</div>
</div>
Here is the link to the border utility in Bootstrap 4:
https://getbootstrap.com/docs/4.2/utilities/borders/
Hello I'm trying to create a navigation bar which is made up of several div containers in one big navigation div.
I'm not sure if my approach is right but I tried to do it like this:
<div id="navigation">
<div class="innen">
<div class="logo">
<img class= "logo" src="logo.png" title="Logo"/>
</div>
<div id="bar">
<!-- Navigation Items are in here --!>
</div>
<div id="gamecard">
<!-- Another right floated Element !-->
</div>
</div>
<div class="unten">
<p>You are here: Main</p>
</div>
</div>
I wanted to push down the bar div to meet the height of the image by using top padding:
#bar{
padding-top: 80px;
}
But now it moves the down gamecard container too. How can I prevent this from happening?
I also added a jfiddle:
http://jsfiddle.net/Cv4p2/
try using position:absolute
<div id="bar" style="position:absolute; padding: 80px 0 0 0">
</div>
Padding is intended to add a cushion inside the container in which you implement it. It appears that you would benefit from using margin. You should replace "padding-top: 80px;" with "margin-top: 80px;" and you would achieve the desired effect.