Fiddle here: https://jsfiddle.net/mv5ut6sw/
I have a list of links at the top of my webpage contained in a <div>. I would like a horizontal <hr> line above and below this <div> to visually separate the links from the rest of the page. Simplified example:
<hr>
<div style="float:left; width:100%">
<div style="float:left; margin-right:20px">
<ul>
<li>Link1</li>
<li>Link2</li>
</ul>
</div>
<div style="float:left; margin-right:20px">
<ul>
<li>Link3</li>
<li>Link4</li>
</ul>
</div>
</div>
<hr>
I am using bootstrap to pretty the page up. Without bootstrap, the <hr>s behave as expected, appearing above and below the link section. When I use bootstrap, however, the two horizontal lines both appear above the link section.
I am at a loss. I don't want to edit bootstrap code. Is there inline css I can include to fix this weird placement?
Its because floats take the elements out of the flow...either you can clear the float value clear:both or by applying overflow:hidden in the parent div...
Well If you are using bootstrap4 then why use floats...just Use d-flex class on the parent div
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<body>
<h3 style="background-color: lightgray; height: 40px; padding: 2px">
Ye old title
</h3>
<hr>
<div class="d-flex">
<ul>
<li>Race Entry</li>
<li>Start</li>
<li>Position Transfer</li>
<li>Contracts</li>
</ul>
<ul>
<li>Statements</li>
<li>Race Position</li>
<li>Advertising Firm</li>
</ul>
<ul>
<li>Report1</li>
<li>Report2</li>
</ul>
<ul>
<li>Settle it!</li>
<li>Upload</li>
<li>Search</li>
</ul>
</div>
<hr>
</body>
"Is there inline css I can include to fix this weird placement?"
It's because of the floats. Just clear the last <hr>..
<hr style="clear:both;">
https://jsfiddle.net/s9L0Lf9b/
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<body>
<h3 style="background-color: lightgray; height: 40px; padding: 2px">
Ye old title
</h3>
<hr>
<div style="float:left; width:100%;">
<div style="float:left; margin-right:20px">
<ul>
<li>Race Entry</li>
<li>Start</li>
<li>Position Transfer</li>
<li>Contracts</li>
</ul>
</div>
<div style="float:left; margin-right:20px">
<ul>
<li>Statements</li>
<li>Race Position</li>
<li>Advertising Firm</li>
</ul>
</div>
<div style="float:left; margin-right:20px">
<ul>
<li>Report1</li>
<li>Report2</li>
</ul>
</div>
<div style="float:left; margin-right:20px">
<ul>
<li>Settle it!</li>
<li>Upload</li>
<li>Search</li>
</ul>
</div>
</div>
<hr style="clear:both;">
</body>
"The float CSS property specifies that an element should be taken from
the normal flow and placed along the left or right side of its
container, where text and inline elements will wrap around it." __ from MDN posted on a related question
P.S. - There's no need to use floats with Bootstrap 4.
Related
I'm using Bootstrap and my issue is that the content (ul) within the "forecastDiv" is not inside the "forecastDiv" border. The content stays inside the border once I remove Bootstrap's grid system but I need to align my content properly so I need to be using the grid system. Below is the code I have in a codepen (go to "6-day forecast" comment in HTML). Any help is appreciated. Thank you.
HTML
<div id="forecastDiv">
<div class="col-md-1" id="boxInfo0">
<p id="forecast0">0
</p>
<p id="forecast0TempC">0
</p>
<p id="day0">Test
</p>
</div>
<div class="col-md-1" id="boxInfo1">
<p id="forecast1">0
</p>
<p id="forecast1TempC">0
</p>
<p id="day1">Test
</p>
</div>
<div class="col-md-1" id="boxInfo2">
<ul id="forecast2">0
</ul>
<ul id="forecast2TempC">0
</ul>
<ul id="day2">Test
</ul>
</div>
<div class="col-md-1" id="boxInfo3">
<ul id="forecast3">0
</ul>
<ul id="forecast3TempC">0
</ul>
<ul id="day3">Test
</ul>
</div>
<div class="col-md-1" id="boxInfo4">
<ul id="forecast4">0
</ul>
<ul id="forecast4TempC">0
</ul>
<ul id="day4">Test
</ul>
</div>
<div class="col-md-1" id="boxInfo5">
<ul id="forecast5">0
</ul>
<ul id="forecast5TempC">0
</ul>
<ul id="day5">Test
</ul>
</div>
</div> <!-- end forecastDiv -->
CSS
#forecastDiv {
width: 100%;
border: solid black;
margin: 0 auto; }
https://codepen.io/mcmaster-99/pen/ybWvyy
add a "container" or "container-fluid" class to your <div id="forecastDiv">. "container" is a bootstrap class that will keep everything inside the div.
<div class="container" id="forecastDiv">
I have this weird problem with my bootstrap row and I can't figure it out..
If you take a look at this image you see that my row is extending outside of my container fluid for some reason. I applied only one style to container fluid which is max-width: 1600px and padding:0. However, I don't think this is the problem.
Here's how I have my footer structured. As I said, no extra styles applied to the .row itself..
<!-- Start Footer area -->
<div class="container-fluid">
<div class="row">
<h3>Quick Links</h3>
<div class="col-xs-4">
<ul>
<li><a class="register-link" href="#"><button class="footer-register-btn" type="button">Register</button></a></li>
<li>About</li>
</ul>
</div>
<div class="col-xs-4">
<ul>
<li>Terms of Service</li>
<li>Privacy Policy</li>
</ul>
</div>
<div class="col-xs-4">
<ul>
<li>Contact</li>
<li>FAQ</li>
</ul>
</div>
</div>
<hr class="hr-devider">
<p class="copyright">Copyright © 2016. All Rights Reserved. Proiect de licenta</p>
</div>
<!-- End Footer area -->
Ok, I figure it out.. The problem was with the fact that I had no padding on the container-fluid. After I added some left and right padding it worked.
I've got html like so:
<div class="content-wrapper">
<div class="float-left">
<img alt="Track System" src="Images/myimage.png" />
</div>
<div class="float-right">
<nav>
<ul id="menu">
<li class="tab"><a runat="server" href="~/">Home</a></li>
<li class="tab"><a runat="server" href="11Models2.aspx">Models</a></li>
<li class="tab"><a runat="server" href="Lease.aspx">Lease </a></li>
<li class="tab"><a runat="server" href="Help.aspx">Help</a></li>
</ul>
</nav>
</div>
</div>
The first div (The one float-left) is just an image that has some length to it...
The second div (the float-right) are tabs that I want to align on the bottom. Right now they are too high up...
the css classes simply are:
.float-left{
float:left;
}
.float-right{
float:right;
}
I tried changing to absolute and relative positioning but it did not help...
Here's what it looks like with the logo correctly being displayed on the left but the tabs on the right floating...I'd like to get those aligned to the bottom.
Is this what you want? http://jsfiddle.net/86Pr2/4/
I added a div with a class of "clear" and the following CSS: (I added !important to all of them cause I didn't feel like looking through all your code.)
.float-right {
position:absolute !important;
bottom:0 !important;
right:0 !important;
}
.content-wrapper {
position:Relative !important;
}
.clear {
clear:both !important;
}
And the changed HTML:
<div class="content-wrapper">
<div class="float-left">
<img alt="Track System" src="http://i.imgur.com/2M3DyCv.png" />
</div>
<div class="float-right">
<nav>
<ul id="menu">
<li class="tab"><a runat="server" href="~/">Home</a></li>
<li class="tab"><a runat="server" href="11Models2.aspx">Models</a></li>
<li class="tab"><a runat="server" href="Lease.aspx">Lease </a></li>
<li class="tab"><a runat="server" href="Help.aspx">Help</a></li>
</ul>
</nav>
</div>
<div class="clear"><!--This makes the wrapper have a height--></div>
</div>
<div id="body">
<section class="content-wrapper main-content clear-fix">
hi
</section>
</div>
Not that #codedude didn't create something that would work but you wouldn't ever want to use the !important tag in your CSS.
Here's what I was working on: http://jsfiddle.net/dancameron/86Pr2/7/
It doesn't require any additional markup either (an empty div to clear!) and cleans up the class names to be more semantic.
HTML:
<div class="content-wrapper clear-fix">
<div class="float-left">
<img alt="Track System" src="http://i.imgur.com/2M3DyCv.png" />
</div>
<div class="nav-wrap">
<nav>
<ul id="menu">
<li class="tab"><a runat="server" href="~/">Home</a></li>
<li class="tab"><a runat="server" href="11Models2.aspx">Models</a></li>
<li class="tab"><a runat="server" href="Lease.aspx">Lease </a></li>
<li class="tab"><a runat="server" href="Help.aspx">Help</a></li>
</ul>
</nav>
</div>
</div>
<div id="body">
<section class="content-wrapper main-content clear-fix">
hi
</section>
</div>
CSS:
.content-wrapper {
margin: 0 auto;
max-width: 100%;
position: relative;
}
.nav-wrap nav {
position: absolute;
bottom: 5px;
right: 5px;
}
I hope you can all help :)
I have a sidebar on my website but because I don't want it going under the fold I would like to split this ten li sidebar into two 5 li sidebars with a div inbetween them showing content using Jquery. I have coded up the website so it looks good but I need the sidebars to act as one menu instead of two so only one selection can be made at a time , one current class etc. Anyone know how to do this? My mark-up is as follows:
<div id="sidebar">
<ul class="list2"><em>
<li class="current1">Bilgorajski</li>
<li>Rzeszowski</li>
<li>Kasuby</li>
<li>Mazur</li>
<li>Lubelski</li>
</em>
</ul>
</div>
<div id="repcontent">
</div>
<div id="sidebar">
<ul class="list2"><em>
<li>Powislainski</li>
<li>Podhalainski</li>
<li>Kujuwiak Oberek</li>
<li>Krakowiak</li>
<li>Szlansk</li>
</em>
</ul>
</div>
You just have to remove tags that commented in the following code:
<div id="sidebar">
<ul class="list2"><em>
<li class="current1">Bilgorajski</li>
<li>Rzeszowski</li>
<li>Kasuby</li>
<li>Mazur</li>
<li>Lubelski</li>
</em>
</ul>
<!-- </div> -->
<div id="repcontent">
</div>
<!-- <div id="sidebar"> -->
<ul class="list2"><em>
<li>Powislainski</li>
<li>Podhalainski</li>
<li>Kujuwiak Oberek</li>
<li>Krakowiak</li>
<li>Szlansk</li>
</em>
</ul>
</div>
Edited: To get three columns layout, I will use zurb-foundation CSS framework as follows:
<body>
<div id="header" class="row">
<div class="twelve columns">
Header
</div>
</div>
<div class="row">
<div id="left-sidebar" class="three columns">
<ul class="list2"><em>
<li class="current1">Bilgorajski</li>
<li>Rzeszowski</li>
<li>Kasuby</li>
<li>Mazur</li>
<li>Lubelski</li>
</em>
</ul>
</div>
<div id="repcontent" class="six columns">
Middle contents
</div>
<div id="right-sidebar" class="three columns">
<ul class="list2"><em>
<li>Powislainski</li>
<li>Podhalainski</li>
<li>Kujuwiak Oberek</li>
<li>Krakowiak</li>
<li>Szlansk</li>
</em>
</ul>
</div>
</div>
</body>
take it easy.. use
-webkit-column-count: 2;
this will splits your contents into two columns..Or if you want to display the sidebars in two sides separately then use 2 separate divisions and float:left|right; property. Or you can query for this using JQuery.
<body>
<div class="container">
<div class="sidebar1">
<ul class="nav">
<li>Link one</li>
<li>Link two</li>
<li>Link three</li>
<li>Link four</li>
</ul>
<p> </p>
<!-- end .sidebar1 --></div>
<div class="content">
<!-- end .content --></div>
<div class="sidebar2">
<!-- end .sidebar2 --></div>
<!-- end .container --></div>
</body>
css
.sidebar1 {
float: left;
width: 20%;
background-color: #93A5C4;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 60%;
float: left;
}
.sidebar2 {
float: left;
width: 20%;
background-color: #93A5C4;
padding: 10px 0;
}
Try this code. this may clarifies your problem .
I'm stuck with the CSS of following HTML link and want to expand the height of header image so I can adjust larger with it, but when I play with the CSS of the .header & .logo classes it expands the navigation bar also, I just really need to expand the height of the header image to have larger height logo into it.
Looking your html source seems you can have different solutions. Problem is with your html... You have
<div class="navigation">
inside
<div class="container">
Ans : get navigation div out of container div. Then changing the height of container div would be the best and not affect the height of your links.
Why you are getting problem : your header div is containing links inside it. That is why changing the height of header is not good (It simply changes the overall height of this div).
Update : Reply to your first comment on my answer
<div class="inner">
<div class="container">
<!-- Logo Start -->
<div class="five columns left">
<img src="images/logo.png" alt="" />
</div>
<!-- Logo End -->
<div class="eleven columns right">
<!-- Top Links Start -->
<ul class="top-links">
<li>
<h4 class="colr">Search Music</h4>
<div id="search-box">
<input name="" value="Enter any keyword"
onfocus="if(this.value=='Enter any keyword') {this.value='';}"
onblur="if(this.value=='') {this.value='Enter any keyword';}" type="text" class="bar" />
<button>Search</button>
</div>
</li>
<li>
LOG IN
<div id="login-box">
<h4 class="white backcolr">User Login </h4>
<ul>
<li>
<input name="" value="yourname#email.com"
onfocus="if(this.value=='yourname#email.com') {this.value='';}"
onblur="if(this.value=='') {this.value='yourname#email.com';}" type="text" class="bar" />
</li>
<li>
<input name="" value="password"
onfocus="if(this.value=='password') {this.value='';}"
onblur="if(this.value=='') {this.value='password';}" type="password" class="bar" />
</li>
<li>
<input type="checkbox" class="left" />
<p>Remember me</p>
Forget Password?
</li>
<li>
<button class="backcolrhover">Login</button>
</li>
</ul>
<div class="clear"></div>
</div>
</li>
</ul>
<!-- Top Links End -->
</div>
<div class="clear"></div>
</div>
<!-- Container End -->
<!-- Navigation Start -->
<div class="navigation">
<div id="smoothmenu1" class="ddsmoothmenu">
<ul id="nav">
<li class="current-menu-item">Home</li>
<li>NEWS</li>
<li>Albums
<ul>
<li>Albums</li>
<li>Album Detail</li>
</ul>
</li>
<li>Blog
<ul>
<li>Blog</li>
<li>Blog Detail</li>
</ul>
</li>
<li>Gallery
<ul>
<li>Gallery - Two Column</li>
<li>Gallery - Three Column</li>
<li>Gallery - Four Column</li>
<li>Gallery - Slide Show</li>
</ul>
</li>
<li>About Us</li>
<li>Contact Us</li>
<li>BUY THIS THEME</li>
</ul>
<div class="clear"></div>
</div>
</div>
<!-- Navigation End -->
</div>
Then change your css and see the results
.container {
width:100%;
height:100px; /* I have changed it 50px to 100px*/
float:left;
margin-top:2px;
}
Change your header height here :
#header {
width:100%;
height:148px; <-----------Here
float:left;
position:relative;
z-index:2;
margin-bottom:15px;
box-shadow:0px 2px 2px #000;
background:url(../images/header.gif) repeat-x;
}
Edit: I just inspected with firebug, you are using multiple classes and you've nested div's, your logo div lies here
five columns left
I guess you've picked this template and you are trying to edit it right?