I am working with Bootstrap.
The problem I have is that the height of my div are smaller than the space the elements inside the div take up.
My question is how to set the height of my about class so that it will be long enough to include all the elements currently in the div and change as I want to add new elements.
Here is my HTML
<div class="about container-fluid"><a name="about"></a>
<div class="col-md-7 border">
<div class="row">
<p>My name is Stefan. I am a budding web developer/designer who likes to learn new things. Things I am somewhat compentent in:</p>
<ul>
<li>HTML/CSS</li>
<li>Bootstrap</li>
<li>jQuery</li>
<li>JavaScript</li>
</ul>
</div>
</div>
<div class="col-md-5 border">
<h2>Coder</h2>
</div>
</div>
Here is my CSS.
I have my about height set to 20px so you know that it is there. Deleting that line just collapses it altogether.
body {
font-family: 'Shadows Into Light', cursive;
font-size:26px;
height:100%;
}
a {
text-decoration:none;
color:white;
}
.navbar {
background-color:#008e76;
}
.nav-tabs {
border-bottom:0px;
}
.about {
border:1px solid green;
margin-top:75px;
font-family: 'Architects Daughter', cursive;
height:20px;
}
p {
padding:5px;
}
.portfolio {
border:1px solid red;
height:200px;
}
.contact {
border:1px solid blue;
height:200px;
}
.border {
border:1px solid black;
}
Here is my CodePen.
http://codepen.io/stefankenyon/pen/ZOKjxV
Thanks
Delete the fixed height height: 20px; from the div:
.about {
border:1px solid green;
margin-top:75px;
font-family: 'Architects Daughter', cursive;
height:20px;
}
Change to:
.about {
border: 1px solid green;
margin-top: 75px;
font-family: 'Architects Daughter', cursive;
}
See this JSFiddle
Related
In my case I am having a nav bar(two tabs) with green border. Below this there is a container with green border. For active tab border-bottom should be white and another tab should be green. So I changed border-bottom:1px solid #fff for active tab alone. This case is working fine is large and medium device. But in small device green line is still displaying under active tab which is the border of the container present under the nav.
HTML Code:
.tab-links:after {
display:block;
clear:both;
content:'';
}
.tab-links li {
margin:3px;
float:left;
list-style:none;
}
.tab-links a {
background:none repeat scroll 0 0 #dfdfdf;
border:1px solid #c3c3c3;
color:#484e2a;
display:inline-block;
font-family:open_sansbold;
font-size:11px;
min-width:166px;
padding:8px 4px;
text-decoration:none;
transition:all .15s linear 0s;
}
.tab-links a:hover {
background:#a7cce5;
text-decoration:none;
}
li.active a, li.active a:hover {
background: #fff;
border:1px solid #dddfb0;
border-bottom:1px solid #fff;
color:#484e2a;
}
.tab-content {
padding:15px;
background:#fff;
border:1px solid #dddfb0;
margin-top:-20px;
}
.tab {
display:none;
}
.tab.active {
display:block;
}
<div class="tabs">
<ul class="tab-links">
<li class="active">Tab #1</li>
<li>Tab #2</li>
</ul>
</div>
<div class="tab-content">
<div id="tab1" class="tab active">
<p>Test Content 1</p>
</div>
<div id="tab2" class="tab">
<p>Test Content 2</p>
</div>
</div>
JS Fiddler link:
https://jsfiddle.net/ktncf454/
#padamapriya :
I did few modifications for you..:
.tab-links li {
margin: 3px;
float: left;
list-style: none;
position: relative;
z-index: 1;
margin-bottom: 2px;
}
.tab-content {
padding: 15px;
background: #fff;
border: 1px solid #dddfb0;
margin-top: -20px;
position: relative;
z-index: 0;
}
Hope this helps!!!!
You will have to write the media query for the this scenario.Generally what happens on different devices the navbar adjust himself automatically.so writing the media query you can change the border for the container and for the tab.
It will good if you share your source code or create a jsfiddle so that we can test and give you the proper solution.
I have the following alignment problem: I want the "random" div to have a full width in the window, that's why I added the "width:100%" command. But for some reason, the maximum width it displays the random div on is the width of the "fixedwidth" div, but the two are not connected. Why does the browser keep matching the maximum width of the two divs? If i increase the width of the "fixedwitdth" div, then the width of the "random div" also increases. But that does not make any sense.
<html>
<head>
<title>Gliga's BBC</title>
<style type="text/css">
body {
margin:0px;
font-family: arial,helvetica;
}
#topbar {
background-color:#7A0000;
width:100%;
height:40px;
color:white;
}
.fixedwidth {
width:1200px;
background-color:green;
margin:0 auto;
}
#logodiv {
padding-top:7px;
padding-bottom:3px;
padding-left:50px;
float:left;
border-right: 2px solid #990000;
padding-right:30px;
}
#signindiv {
font-weight:bold;
padding:9px 80px 11px 20px;
font-size:0.9 em;
float:left;
border-right: 2px solid #990000;
}
#topmenudiv {
float:left;
}
#topmenudiv ul {
margin:0;
padding:0;
}
#topmenudiv li {
list-style:none;
font-weight:bold;
font-size:0.9 em;
border-right: 2px solid #990000;
height:100%;
padding:10px 20px 10px 20px;
float:left;
}
#searchdiv {
float:left;
padding:6px 10px 5px; 5px;
border-right: 2px solid #990000;
}
#searchdiv input{
height:20px;
}
.break {
clear: both;
}
.random {
background-color:blue;
margin-top:10px;
height:30px;
width:100%;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbclogo.png"/>
</div>
<div id="signindiv">
Sign in
</div>
<div id="topmenudiv">
<ul>
<li>News</li>
<li>Sport</li>
<li>Weather</li>
<li>iPLayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</li>
</ul>
</div>
<div id="searchdiv">
<input type="text" placeholder="Search..." />
<div>
</div>
</div>
<div class="break" />
<div class="random">
</div>
</div>
</body>
</html>
.random is a child of .fixedwidth, so it's a totally normal behaviour happening there.
If you sort your code properly then you will get to see it clearly:
I'm currently developping a website and encountered a problem with CSS.
I have a parent div containing 2 or more children: one containing the name of a user that sits on top of the other children, and just below 1 or more side by side divs which display items owned by the user.
At the moment it works fine, but if the user's name (top div) is larger than the total width of the divs below, it will expand the parent div.
I'd like to only allow the bottom divs to expand the parent div and make the title div use the full parent div's width without being able to make it larger.
I created a fiddle about it: http://jsfiddle.net/mLxjL/2/
HTML:
<div class="matches">
<div class="match-container">
<div class="user-match-container">
<div class="match-owner user">You</div>
<div class="match">
<div class="thumbnail">
<img class="image-container" src="img-path">
<div class="thumbnail-count">2</div>
</div>
<div class="item-name">The Zeppelin of Consequence (Trading Card)</div>
</div>
</div> <span class="arrow">→</span>
<div class="user-match-container">
<div class="match-owner friend">PfaU- [W] King Arthurs Gold</div>
<div style="clear:both;"></div>
<div class="match">
<div class="thumbnail">
<img class="image-container" src="img-path">
<div class="thumbnail-count">2</div>
</div>
<div class="item-name">The Lost Hobo King</div>
</div>
</div>
</div>
</div>
CSS:
.match-container:before, .match-container:after {
content:"";
display:table;
}
.match-container:after {
clear:both;
}
.match-container {
border:1px solid #666;
background-image:url('img/stripes.png');
border-radius:5px;
padding:10px;
margin:10px;
float:left;
}
.match {
width:112px;
float:left;
margin: 0 2px;
}
.match .image-container {
width:112px;
height:130px;
display:block;
}
.match .item-name {
line-height:12px;
font-size:10px;
margin-top:4px;
text-align:center;
height:24px;
overflow:hidden;
clear:both;
}
.match-container .arrow {
float:left;
position:relative;
top:70px;
margin:5px;
}
.match-owner {
line-height:14px;
font-size:12px;
margin-top:4px;
text-align:center;
height:14px;
overflow:hidden;
margin-bottom:4px;
border:1px solid #666;
background-image:url('img/stripes.png');
border-radius:5px;
}
.match-owner.user {
background-color:green;
}
.match-owner.friend {
background-color:red;
}
.thumbnail-count {
position:relative;
top:-24px;
margin-bottom:-24px;
font-size:16px;
font-weight:bold;
border-top:1px solid white;
border-right:1px solid white;
border-top-right-radius: 7px;
font-size:18px;
background: rgb(160, 160, 160) transparent;
background: rgba(160, 160, 160, 0.70);
padding: 0 4px;
float:left;
}
.user-match-container {
float:left;
}
Is it possible to do this without using JavaScript?
You can use Absolute positioning
FIDDLE
position:absolute;
top:0;
left:0;
width:100%;
and on the container div :
padding-top: /*the height of the absolutly positioned child*/ ;
position:relative;
If you add the following styles you should achieve what you want:
.user-match-container {
position: relative;
padding-top: 22px;
}
.match-owner {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: absolute;
top: 4px;
left: 0;
right: 0;
}
Example
I've come across a bit of an issue and was hoping for some advice.
I've always been a bit on-off with laying out websites like this but it's come to the day where I've had enough of fending it off.
So I have two divs, left and center, both are set to float:left; These are both in a "main" section but because the two are floating, the "main" section is smaller in height than these two which overlap due to the floating quality.
I've tried display:inline & display:inline-block but the first stacks them one on top of the other whilst the latter completely loses me my CSS for the corresponding div.
Was hoping someone could help me, if so, it'd be greatly appreciated! Here's the code:
HTML:
<div id="main_container">
<aside id="left">
<p id="settings_header">
Account Settings
</p>
<hr>
<img id="profile_picture" src="#" />
<div id="settings_option">
<a href="#">
Settings
</a>
</div>
<div id="settings_option">
<a href="#">
Sign Out
</a>
</div>
</aside>
<div id="center">
<h2>
Latest & Greatest Topics
</h2>
</div>
</div>
CSS:
#main_container {
width:82%;
min-width:932px;
margin-left:auto;
margin-right:auto;
padding:10px 10px;
box-shadow:inset 0 0 10px #000;
background-color:#ccc;
}
#left {
width:26%;
min-width:176.4px;
margin-right:5px;
display:inline-block;
float:left;
background-color:#fff;
border:1px solid #222;
box-shadow:0 0 5px #000;
font-family: verdana;
font-size:12px;
color: #000;
}
#center {
width:68%;
min-width:670.6px;
margin-left:5px;
margin-right:5px;
display:inline-block;
float:left;
background-color:#fff;
border:1px solid #222;
box-shadow:0 0 5px #000;
font-family: verdana;
font-size:12px;
color: #333;
text-align:left;
}
#center h2 {
font-family:tahoma;
font-weight:bold;
font-size:18px;
text-decoration:underline;
text-align:center;
color:black;
letter-spacing:1px;
}
Thanks for any help in advance!
You just need to add this:
#main_container:after {
content: "";
display: block;
clear: both;
}
Try this one:
#main_container {
float:left;
}
See the result
add
overflow:hidden
to #main
Because you have set width on your container everything should be kept in the box
I have searched google, but I didn't find anything. I searched this site and found this topic Unwanted space between divs which seems similar, and i have tried to apply
margin:0px;
several places, but there i still, space between the two divs.
Heres my html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>title/title>
<link rel="stylesheet" type="text/css" href="e.css">
</head>
<body>
<div id="page">
<div id="content">
<div id="up">
<div id="tab">
<ul id="tabmenu">
<li id="anm" class="tbs blue"><span>Anm</span></li>
<li id="kom" class="tbs blue"><span>Kom</span></li>
<li id="omt" class="tbs blue"><span>Omt</span></li>
<li id="sts" class="tbs blue"><span>Sts</span></li>
</ul>
</div>
<div id="usrp">
<div id="usr">
</div>
</div>
</div>
</div>
<div id="bottom">
</div>
</div>
</body>
</html>
And my Css
html {
height: 98%;
}
body {
height:99%;
}
#page {
height:99%;
}
#content {
/*border:2px solid blue;*/
}
#bottom {
border:2px solid green;
height:15%;
vertical-align: bottom;
}
#up {
/*border:dotted green 2px;*/
width:59%;
}
.usrcom {
border-bottom: 2px dotted blue;
margin-left:15px;
margin-right:15px;
}
#usrp {
width:100%;
clear:both;
border-right: 2px solid blue;
border-left: 2px solid blue;
border-bottom:2px solid blue;
border:dotted yellow 2px;
}
/***Tabs menu*****/
#tabmenu {
float:left;
width:685px;
/*background:#BBD9EE;*/
/*background:#FF6633;*/
font-size:93%;
line-height:normal;
margin-top: 0px;
margin-left: 0px;
/*border:dotted red 2px;*/
border-bottom:2px solid blue;
/*border:dotted red 2px;*/
}
#tabmenu ul {
/*background:#BBD9EE;*/
padding:0px 0px 0 0px;
margin:0px;
list-style:none;
border:dotted green 2px;
}
#tabmenu li {
display:inline;
padding:0;
margin:0px;
}
#tabmenu a {
float:left;
/*background:url("img/tableft2.png") no-repeat left top;*/
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabmenu a:hover span {
background-color:#3399FF;
margin:0px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
#tabmenu a span {
float:left;
display:block;
/*background:url("img/tabright2.png") no-repeat right top;*/
padding:5px 15px 4px 5.5px;
margin:0px;
color:#FFFFFF;
background-color:#0000FF;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
I can find out why the space happens, how can I solve this unwanted space.
Edit:
Ups, yearh, forgot to tell which divs,
It is between 'Tabmenu' and 'usrp'
Edit:
Tried to apply in my css
#tab {
margin: 0px;
padding:0px;
}
For it is in really between 'tab' and 'usrp' but that does no help.
In CSS:
#tabmenu {
margin:0;
}
should do the trick
Learn how to use an inspector and "inspect this element". Then you can hover over all the elements on your page and literally see their margins/paddings, and what CSS is causing them. You can even edit CSS on-the-fly to test out a fix before applying it. My preference is the Firebug add-on for Firefox, but Chrome, Safari, and even Internet Explorer all have them built in now.