How do i put a border on a div in css that doesn't have a set height?
Want to achieve this without using any javascript. Code is below.
HTML
<div id="main_container">
<div id="header">
<div id="topMenu">
<ul id="topNav">
<li>Home</li><li>Contact</li><li>Links</li>
</ul>
</div>
<div id="mainMenu">
<ul id="mainNav">
<li >Home</li><li >About Us</li><li >Multimedia</li><li >Multimedia</li><li >Multimedia</li><li >Multimedia</li><li >Multimedia</li><li >Multimedia</li>
</ul>
</div>
</div>
</div>
css
body{
text-align:center;
min-width:70%;
}
#main_container{
position:relative;
width:980px;
margin:auto;
text-align:center;
background-color:#FFFFFF;
border-color: #999999;
border-style: solid ;
border-width: 1px ;
margin-bottom: 20px;
}
#header{
position: relative;
width: 980px;
}
#mainMenu{
float:left;
width: 980px;
top: 50px;
background-color: #0099FF;
height: 30px;
}
#mainNav{
text-align: left;
}
ul#mainNav li{
display: inline;
margin: 0px 20px 0px 0px;
}
#topMenu{
width: 150px;
top: 10px;
text-align: right;
float:right;
margin-bottom: 20px;
}
ul#topNav li{
display: inline;
margin: 0px 10px 0px 0px;
}
#footer{}
Thanks in advance.
Does it work?
<div style="border:1px solid #000">
Your content here
</div>
It doesn't matter if there is no height attribute. Just use the border property as you normally would.
Edit: since you mention you have other divs inside your container div, I suspect you might need to use a clear. If you're still having issues with either the background or border not extending the length of the container, try adding this right before the closing div of the container:
<div style="clear:both"></div>
Just give the div some padding or content inside.
div {
border: solid 1px #000;
padding: 10px;
}
Related
I would like to evenly space the 3 links ('About', 'Hours', 'Contact') within the containing 'banLinks' div. I do not want to use a list of any kind.
I would like each link to be evenly spaced, taking up 1/3 of their container. I am very new to HTML and CSS and I'm not sure how to do this.
I think one way of doing it may be by dividing the width of the div container in pixels by 3, account for the font size, then set the margins somehow around this figure. But to me this seems a bit unseemly, I'n not sure if this is the done thing.
<body>
<div id="wrapper">
<div class="bruceBanner">
<a href="#">
<img border="0" alt="XYZ Banner" src="http://bit.ly/1QSpdbq" width="553" height="172">
</a>
</div>
<nav>
<div class="banLinks">
<a id="about" href="#">About</a>
<a id="hours" href="#">Hours</a>
<a id="contact" href="#">Contact</a>
</div> </nav>
</div><!-- .wrapper-->
</body>
CSS:
#wrapper {
}
.bruceBanner img {
border: 2px solid black;
height: 172px;
width: 553px;
display: block;
margin: 0 auto;
}
.banLinks {
border: 2px solid black;
width: 553px;
text-align: center;
margin: 0 auto;
}
#about, #hours, #contact {
font-size: 20px;
border: 2px solid blue;
}
Here is a jsfiddle. https://jsfiddle.net/yuy84gmq/6/
you can do this using flexbox. Do as followed:
.banLinks {
border: 2px solid black;
width: 553px;
text-align: center;
margin: 0 auto;
display: flex;
justify-content: space-around; //or space-between whatever you like best
}
JSfiddle: https://jsfiddle.net/yuy84gmq/10/
flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Add this to style:
.banLinks {
border: 2px solid black;
width: 553px;
text-align: center;
margin: 0 auto;
padding: 0;
}
.banLinks a{
width: calc(33% - 4px);
display: inline-block;
margin: 0;
}
Use a display table
.banLinks {
display:table;
table-layout:fixed;
border: 2px solid black;
width: 553px;
text-align: center;
margin: 0 auto;
}
.banLinks a {
display:table-cell;
}
Here is the fiddle: https://jsfiddle.net/yuy84gmq/8/
A couple of options here...both of which work regardless of the number of list items...assuming there is enough width.
Display:Table-cell
.banLinks {
border: 2px solid black;
width: 553px;
text-align: center;
margin: 0 auto;
display: table;
}
.banLinks a {
display: table-cell;
border: 1px solid grey
}
<div class="banLinks">
<a id="about" href="#">About</a>
<a id="hours" href="#">Hours</a>
<a id="contact" href="#">Contact</a>
</div>
Flexbox
.banLinks {
border: 2px solid black;
width: 553px;
text-align: center;
margin: 0 auto;
display: flex;
}
.banLinks a {
flex: 1;
border: 1px solid grey
}
<div class="banLinks">
<a id="about" href="#">About</a>
<a id="hours" href="#">Hours</a>
<a id="contact" href="#">Contact</a>
</div>
Instead of usual a links, put them into a list, and set the list to be inline. Then you can apply margin to the list items to space them out.
HTML
<nav>
<ul class="banLinks">
<li><a id="about" href="#">About</a></li>
<li><a id="hours" href="#">Hours</a></li>
<li><a id="contact" href="#">Contact</a></li>
</ul>
</nav>
CSS
.banLinks li { display:inline-block;margin:0 10px;} /* Adjust left/right margin as appropriate */
I'm trying to use angular to create list of elements. The page will be an app on mobile phone.
The list itself can have many elements so what I expect is that the ul element should be scrollable ("swipable"?). I tried to follow some example like http://jsfiddle.net/sirrocco/9z48t/ and http://jsfiddle.net/qcv5Q/1/..
This is the html code:
<div class="container">
<div id="spinner-icon" style="display:none">
<span class = "icon-spinner"></span>
</div>
<div class="col-xs-12 indentation push-down bg-white" ng-repeat="cei in completeElementInfo">
<div class="clearfix">
<div class="pull-left">
<h4>{{cei.description}}</h4>
<p>{{cei.name}}</p>
</div>
</div>
<div class="log-widget-list">
<ul class="list scroller clearfix" id="elements-list">
<li class="pull-left" ng-repeat="tinfo in cei.techInfo | orderBy: 'tinfo.sentTime'">
<h4 class="align-center">{{tinfo.elementShortCode}}</h4>
<div class="clearfix">
<span class="icon-clock pull-left"></span>
<span class="pull-right"> {{tinfo.sentTime}}min</span>
</div>
</li>
</ul>
</div>
</div>
</div>
and this is the css code:
.list {
margin: 0;
padding: 0;
}
.log-widget-list {
height:100px;
width: 720px;
overflow: hidden;
}
.log-widget-list .scroller{
overflow-x: scroll;
list-style-type: none;
width: 1500px; /* combined width of all LI's */
}
#elements-list li {
width: 100px;
list-style: none;
box-sizing: border-box;
border-top: none!important;
background-color: #0accf8;
padding: 4px;
}
#elements-list li:not(:last-of-type) {
border-right: 3px solid #ffffff;
}
#elements-list [class^="icon-"], #elements-list [class*=" icon-"] {
margin-top: 4px;
font-size: 12px;
}
Now the problem is that i don't want that the horizontal scrollbar appears, but it appears and i don't understand why... Any idea?
add overflow:hidden in #wrapper css.
CSS:
#wrapper {
background: transparent;
width: 550px;
color: white;
height:100%;
overflow:hidden;
}
Demo: http://jsfiddle.net/lotusgodkk/9z48t/5/
DEMO
http://jsfiddle.net/FTUrF/6/
Changed some CSS here:
.log-widget-list {
width: 200px;
height: 300px;
border: 1px solid #000;
overflow: hidden;
}
.log-widget-list .scroller {
width: 215px;
height: 300px;
overflow: scroll;
padding-bottom: 15px;
list-style-type: none;
}
Added height and padding-bottom in .scroller and border in .log-widget-list
and added some more of these:
<span class="pull-right"> {{tinfo.sentTime}}min</span>
http://jsfiddle.net/W9LXd/
I want the div under the #araclar to have it's right border stay in the same line. How can I prevent it from shifting?
CSS:
#düzenleyici{
border: 1px solid #000;
width: 600px;
height: 300px;
box-shadow: 1px 1px 4px #000;
}
#araclar{
width:auto;
height:50px;
background:#EEEEEE;
display:block;
padding:5px 15px 5px 15px;
border-bottom:1px solid #000;
}
#araclar>div{
padding:0 5px 0 5px;
display:inline;
border:1px solid #000;
}
HTML:
<div id="düzenleyici">
<div id="araclar">
<div>
Renk
<div>
</div>
</div>
Change display: inline; to display: inline-block;
Use: http://jsfiddle.net/W9LXd/1/
display: inline-block instead of display-inline
Or give a specific width.
IMO there is no problem with your CSS
Your HTML is malformed, Please close the inner most div - on which you have set display:inline
<div id="düzenleyici">
<div id="araclar">
<div>
Renk
</div> <!-- yOU have not closed the tag here -->
</div>
</div>
FIDDLE
I know its the noobest question you had every seen but but really guys I am not able to find whats wrong in my css. I am trying to float two divs inside a footer div. But the problem is that the first div (#copyrights) is just stuck in the middle. It looks like there's something wrong with the main container (#footer). Because when I place the last container outside it then everything works great
Have a look at my code on jsfiddle.
Heres my HTML (The footer div is at the bottom):
<div id="footer">
<!-- Upper footer -->
<div id="upper-footer">
<!--Footer Navigation Links -->
<ul>
<li>
Home
</li>
<li>
About Us
</li>
<li>
The Mall
</li>
<li>
Media Center
</li>
<li>
Contact Us
</li>
</ul>
<!-- End od Footer nav links -->
<!--Start of newsletter div -->
<div id="newsletter">
<span>SignUp To Get The Latest News & Updates</span>
<form>
<input class="rounded" type="text" value="Your Email Here..." >
<input class="rounded-button" value="SUBSCRIBE" type="button" >
</form>
</div>
<!--End of Newsletter div-->
</div>
<!-- End of upper footer -->
<!-- Start of lower footer -->
<div id="lower-footer">
<div id="copyrights">
2013 Boulevar Mall. All rights reserved.
</div>
<div id="social">Follow us </div>
</div>
<!--End of lower footer -->
And here's my css:
#import url(http://fonts.googleapis.com/css?family=Droid+Sans);
#footer
{
height:100px;
font-family: 'Droid Sans', sans-serif;
text-transform:capitalize;
font-size:14px;
}
/*css for upper footer */
#upper-footer
{
height:70%;
background-color:#efe7e1;
}
#upper-footer #newsletter
{
float:right;
height: 100%;
display: table;
}
#upper-footer ul
{
list-style:none;
margin-top: 0px;
float:left;
width:480px;
}
#upper-footer ul li
{
display:inline-block;
height: 100%;
border-left: 1px solid d7cfca;
}
#upper-footer ul li:nth-child(1)
{
border-left:none;
}
#upper-footer ul li a
{
line-height:200%;
text-decoration:none;
color:#9b907c;
display:block;
line-height:70px;
padding-left:15px;
padding-right:15px;
width: 100%;
}
#upper-footer #newsletter span
{
color:#726753;
width:150px;
display: table-cell;
vertical-align: middle;
}
#upper-footer #newsletter form
{
display: table-cell;
vertical-align: middle;
padding-left: 15px;
}
/*for rounded text box */
input.rounded
{
border: 1px solid #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 2px 2px 3px #666;
-webkit-box-shadow: 2px 2px 3px #666;
box-shadow: 2px 2px 3px #666;
font-size: 9.42px;
padding: 4px 7px;
outline: 0;
-webkit-appearance: none;
height:26px;
width:163px;
text-align:center;
}
/*for rounded button */
input.rounded-button
{
border: 1px solid #ccc;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
font-size: 9.42px;
padding: 4px 7px;
outline: 0;
-webkit-appearance: none;
height:29px;
width:80px;
background-color:#726753;
color: white;
font-weight: bold;
}
input.rounded-button:hover
{
background-color:white;
border:#726753 solid 1px;
color:#726753
}
/*css for lower footer */
#lower-footer
{
background-color:#726753;
height:30%;
color:white;
}
#lower-footer #copyrights
{
float:left;
}
#lower-footer #social
{
float:right;
}
Your're free to point out my mistakes as I am very new to this stuff :)
Thanks in advance!
It is the margin on #upper-footer ul that's not letting your #copyrights float to the extreme left. Try replacing #upper-footer ul rule with following
#upper-footer ul
{
list-style:none;
margin: 0;
float:left;
width:480px;
}
it sets all margins for #upper-footer ul to zero instead of only margin-top.
Update
As the margin of the #upper-footer ul element is overflowing out of its parent, #upper-footer, setting overflow: hidden for #upper-footer will also do the trick.
ALL COMPONENTS ARE DISPLAYED OK. BUT WHEN I PRESS F12 AND HOVER OVER NAVBAR-LEFT, it's height is that of 0px. I think I need to solve this by placing a small div with class clear somewhere, but I don't know where exactly!
<div class="core-container">
<div class="core-content">
<div class="navbar">
<div class="navbar-left">
<div class="navbar-logo">
LOGO
</div>
<div class="navbar-suggestions">
SUGGESTIONS
</div>
<div class="navbar-notifications">
NOTIFICATIONS
</div>
<div class="clear">
</div>
</div>
<div class="navbar-right">
<ul>
<li>Profiles & Schedules</li>
<li>Settings</li>
<li>Log Out</li>
</ul>
</div>
<div class="clear">
</div>
</div>
</div>
</div>
css code:
/MASTER PAGE/
.core-container
{
margin-top: 100px;
border: 1px solid black;
}
.core-content
{
width: 1000px;
margin-left: auto;
margin-right: auto;
padding: 10px 20px 10px 20px;
}
.navbar
{
border: 1px solid red;
padding: 10px 5px 10px 5px;
}
.navbar-right div
{
float: right;
}
.navbar-left div
{
border-right: 1px solid red;
float: left;
padding-right: 10px;
margin-right: 10px;
}
.navbar-right ul li
{
list-style-type: none;
float: right;
padding-left: 10px;
margin-left: 10px;
border-left: 1px solid red;
}
.clear
{
clear: both;
}
Yes, everything in your navbar-left is floating, so its height remains 0. But is that a problem? It looks good on the screen!
Anyway, the quick answer is to append float:none to the style for the clear class. Make sure you make it specific enough to override the styles for .navbar-left div and navbar-right div though, like this:
.navbar-left .clear, .navbar-right .clear
{
clear: both;
float:none;
}
Reason is that your clear DIV also have float on it because you define class like this:
.navbar-right div
{
float: right;
}
write like this:
.navbar-right .clear
{
float: none;
}