I want to make a more compact , but the compact attribute doesn't work in the structure I am using.
Can someone help me lessen the vertical "margin" of each li?
Code Snippet
<main id="main-canvas" style="padding-left: 120px">
<div class="row">
<div class="row" style="width:100%">
<div class="col-9" style="padding-left:0px">
<div class="row">
<ul style="padding-left:25px" compact>
<li><b class="content">123: </b>
<p class="secondary-content">Lorem</p>
</li>
<li><b class="content">456</b>
<p class="secondary-content"> ipsum dolor sit</p>
</li>
<li><b class="content">789</b>
<p class="secondary-content">amet consecituir or something like that I don't know I don't care</p>
</li>
</ul>
</div>
<div class="row">
<h3>Some stuff</h3>
</div>
<p class="secondary-content">Some secondary content</p>
</div>
<div class="col-3">
<div class="row">
<h3 id="sidemenu-h">sidemenu</h3>
</div>
</div>
</div>
</div>
</main>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css">
All right, no one wants to answer so I will do it.
Both #Yogi and #jme11 were right - removing the margin on <p> tag coupled with setting the line-height on the ul while removing the compact attribute did the trick.
The final html:
<ul style="padding-left:25px; line-height:18px">
<li><b class="content">123: </b>
<p class="secondary-content" style="margin-bottom:0px">Lorem</p>
</li>
<li><b class="content">456</b>
<p class="secondary-content" style="margin-bottom:0px"> ipsum dolor sit</p>
</li>
<li><b class="content">789</b>
<p class="secondary-content" style="margin-bottom:0px">amet consecituir or something like that I don't know I don't care</p>
</li>
</ul>
Related
I have list that I render with semantic-ui and it needs some margin to the top for the first element. I looked in the CSS code and I see margin-top:0!important and I can override it for the first element with margin-top:10px!important; and then the rendering looks good. Is there a better way to achieve it? My code (without the fix) is
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<ul class="nav nav-tabs">
<li class="nav active">All
</li>
<li class="nav">Company
</li>
<li class="nav">Private
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="A">
<div class="ui divided items">
<div class="item">
<div class="ui left floated">
7 July.
<br>3:33
</div>
<div class="image">
<a href="/vi/5022701123010560.html">
<img src="http://lh3.googleusercontent.com/JZkr-b_aWlYrFG1G-EUywZgucJE3JV1wgz4yQGrx-bGaw_va7dymsaTMXhK5t6ZkUdjWLeHlNaiksVNAMp8I1epB-Q=s150" title="Wordpress development company, website developer" alt="Wordpress development company, website developer">
</a>
</div>
<div class="content">
<a class="header" href="/vi/5022701123010560.html">Wordpress development company, website developer</a>
<div class="meta">
<span class="price"></span>
</div>
<div class="description">
<p>Dit Interactive have experts wordpress ...</p>
</div>
<div class="extra">
<div class="ui label">
Services
</div>
<div class="ui label">
For sale
</div>
<div class="ui label">Central NJ</div>
<div class="ui label">New Jersey</div>
<div class="ui right floated primary button">
Buy now
<i class="right chevron icon"></i>
</div>
</div>
</div>
</div>
<div class="item">
<div class="ui left floated">
7 July.
<br>0:54
</div>
<div class="image">
<a href="/vi/5870511561113600.html">
<img src="http://lh3.googleusercontent.com/rsfBseoSy-KPg6P703Dknbpd0t2Ug4n2BY8oKkg2XH5dkufstmZXMWSCsHTU4C0yb7bIaMBpAFxILaW6W3lZsiCt=s150" title="Dentist in Westminster" alt="Dentist in Westminster">
</a>
</div>
<div class="content">
<a class="header" href="/vi/5870511561113600.html">Dentist in Westminster</a>
<div class="meta">
<span class="price"></span>
</div>
<div class="description">
<p>Pari J. Moazed, DDS is a family dentist ...</p>
</div>
<div class="extra">
<div class="ui label">
Services
</div>
<div class="ui label">
For sale
</div>
<div class="ui label">Baltimore</div>
<div class="ui label">Maryland</div>
<div class="ui right floated primary button">
Buy now
<i class="right chevron icon"></i>
</div>
</div>
</div>
</div>
</div>
This "solution" works, but I don't like it
<div {% if loop.index0 == 0 %}style="margin-top:10px!important"{% endif %} class="item">
By the looks of it I would personally just change the margin on the with the simple line:
.container .nav{
margin-top:10px;
}
Does this answer your question? (I know it looks too simple to be true)
I would suggest adding a custom class to <ul class='nav nav-tabs'>
<ul class="nav custom-class nav-tabs">
and adding margin-bottom to it
.custom-class{
margin-bottom:20px;
}
We are adding a custom class to unordered list <ul> so that changes made to it doesn't effect other elements which are using nav class
On your div.tab-content try adding class ui basic segment
I know it is waaay overdue, but I came across this thread when looking for the same issue in Semantic UI React. My solution was to add a divider above the first container:
<Divider hidden></Divider>
I've been working on a problem that occured recently and i can't find how to solve it. I'm a beginner so forgive me if my problem is really simple.
<section class="container">
<div class="row">
<div class="col-md-8 text-left">
<div id="filter">
<ul>
<li><i class="icon icon-reorder"></i> All Items</li>
<li><i class="icon icon-th-large"></i> Exemple</li>
<li><i class="icon icon-th-list"></i> Exemple</li>
<li><i class="icon icon-th"></i> Exemple</li>
</ul>
</div>
</div>
<div class="col-md-4 text-right">
<div id="search">
<p>Lorem Ipsum</p>
</div>
</div>
</div>
</section>
<section class="container">
<div id="content">
<div class="row">
<div class="col-md-9">
<div class="boxportfolio3 item cat2 cat3">
<div class="boxcontainer">
<img src="../img.jpg" alt="">
<div class="roll">
<div class="wrapcaption">
<i class="icon-link captionicons"></i>
<a data-gal="prettyPhoto[gallery1]" href="../img.jpg" title="Exemple"><i class="icon-zoom-in captionicons"></i></a>
</div>
</div>
<h1>Exemple</h1>
<p>
Exemple
</p>
</div>
</div>
<!-- box 2 -->
<div class="boxportfolio3 item cat1">
<div class="boxcontainer">
<img src="../img.jpg" alt="">
<div class="roll">
<div class="wrapcaption">
<i class="icon-link captionicons"></i>
<a data-gal="prettyPhoto[gallery1]" href="../img.jpg" title="Exemple"><i class="icon-zoom-in captionicons"></i></a>
</div>
</div>
<h1>Exemple</h1>
<p>
Exemple
</p>
</div>
</div>
<!-- box 3 -->
<div class="boxportfolio3 item cat2 cat3">
<div class="boxcontainer">
<img src="../img.jpg" alt="">
<div class="roll">
<div class="wrapcaption">
<i class="icon-link captionicons"></i>
<a data-gal="prettyPhoto[gallery1]" href="../img.jpg" title="Exemple"><i class="icon-zoom-in captionicons"></i></a>
</div>
</div>
<h1>Exemple</h1>
<p>
Exemple
</p>
</div>
</div>
<!-- box 4 -->
<div class="boxportfolio3 item cat1">
<div class="boxcontainer">
<img src="../img.jpg" alt="">
<div class="roll">
<div class="wrapcaption">
<i class="icon-link captionicons"></i>
<a data-gal="prettyPhoto[gallery1]" href="../img.jpg" title="Exemple"><i class="icon-zoom-in captionicons"></i></a>
</div>
</div>
<h1>Exemple</h1>
<p>
Exemple
</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="text-side">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac velit luctus, pharetra magna eu, auctor purus.</p>
</div>
</div>
</div>
</div>
</section>
Now since i want my block to be divided in 2 I used a col-md-9 and a col-md-3.
What i get is this : http://image.noelshack.com/fichiers/2015/20/1431873111-resultat.jpg
What i had and what i would like is this : http://image.noelshack.com/fichiers/2015/20/1431873148-attente.jpg
I want my boxcontainer to fill the full space of the col-md-9, but there is this blank space that I cannot fill and I don't know why.
I hope i was clear enough since english is not my native language, and since i'm still a beginner in programming. I'd be happy to hear advices from you.
It seems you have defined margins for your "box" items. This means that the width of the div with id="content" is now small to contain your box items plus their margins. try removing any margins
Two bullet points are flowing onto a second line needlessly.
"2 Users Free For Life" and "Up to 5 databases, including a Demo Database" both go into a second line which looks ugly and means the final bullet point almost sites on the "Show me the features" button.
You can visit the site at: http://www.workbooks.com/workbooks-instant-access
See:
The code is as follows:
<div id="pricing-list">
<div class="pricing-item" id="free-item">
<div class="h-line at-top">
</div>
<div class="left-part">
<h3>
Free Edition</h3>
<p class="desc-1">Get started right away with our free edition.</p>
<p class="desc-2">Free for up to 2 users</p>
</div>
<div class="right-part">
<div class="l-col">
<ul class="features-list">
<li>
Community Support Only</li>
<li>
Sales, Marketing and Support</li>
<li>
Quotes, Orders and Invoices</li>
</ul>
<p><a class="do-btn" href="/sign-up/workbooks-free-edition">Sign up to the FREE Edition</a></p>
</div>
<div class="r-col">
<ul class="features-list">
<li>
1 Database Only</li>
<li>
2 Users Free for Life</li>
<li>
Storage Limit</li>
</ul>
<br />
<br />
<a class="do-btn" href="/pricing">Show me the features</a></div>
</div>
<div class="h-line at-bottom">
</div>
</div>
<div class="pricing-item" id="trial-item">
<div class="h-line at-top">
</div>
<div class="left-part">
<h3>
30 Day Free Trial</h3>
<p class="desc-1">Access all features for 30 days. Unlimited users.</p>
<p class="desc-2">Full Feature Trial</p>
</div>
<div class="right-part">
<div class="l-col">
<ul class="features-list">
<li>
Sales, Marketing and Support</li>
<li>
Quotes, Orders and Invoices</li>
<li>
Multi Currency</li>
</ul>
<a class="do-btn" href="/sign-up/workbooks-trial-edition">Trial the Business Edition</a></div>
<div class="r-col">
<ul class="features-list">
<li>
Telephone & Community Support</li>
<li>
Up to 5 databases, including a Demo Database</li>
<li>
Advanced Security</li>
</ul>
<br />
<a class="do-btn" href="/pricing">Show me the features</a></div>
</div>
<div class="h-line at-bottom">
</div>
</div>
<div class="pricing-item" id="instant-item">
<div class="h-line at-top">
</div>
<div class="left-part">
<h3>
Instant Access</h3>
<p class="desc-1">Jump straight into our demo system</p>
</div>
<div class="right-part">
<div class="instant-access-bg">
<div class="l-col">
<ul class="features-list">
<li>
Log straight into a Demo System</li>
<li>
Get an instant feel for Workbooks</li>
</ul>
<a class="do-btn" href="http://content.workbooks.com/workbooks-instant-access">Access the demo instantly</a></div>
</div>
</div>
</div>
<div class="pricing-item" id="adv-item">
<div class="h-line at-top">
</div>
<div class="left-part">
<h3>
Speak to an advisor</h3>
<p class="desc-1">Speak right now to someone who can help</p>
</div>
<div class="right-part">
<div class="speak-to-an-advisor-bg">
<div class="l-col">
<ul class="features-list">
<li>
Ask any questions you have</li>
<li>
Find out which edition is right for you</li>
</ul>
<a class="do-btn" href="https://server.iad.liveperson.net/hc/31900811/?cmd=file&file=visitorWantsToChat&site=31900811&byhref=1" onclick="javascript:window.open('https://server.iad.liveperson.net/hc/31900811/?cmd=file&file=visitorWantsToChat&site=31900811&byhref=1','new_win','width=484,height=361');return false;" target="_blank">Start Online Chat</a></div>
</div>
</div>
<div class="h-line at-bottom">
</div>
</div>
</div>
<p> </p>
Anyone know what's going on?
You can fix this by adding white-space: nowrap; to .pricing-item .features-list li css class.
Hi first of all thanks to all and thanks to stackoverflow i am new for html and css i downloaded free website template from internet i want to editing i did something, when i removing upper div class footer background shrink from full width to main width and some of changes also happening in footer.
![BEFORE EDITING TEMPLATE][1]
HTML OF BEFORE EDITING
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Wood Working Website Template</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="header">
<div>
<div id="logo">
<img src="images/logo.png" alt="LOGO">
</div>
<ul id="navigation">
<li class="selected">
Home
</li>
<li>
About
</li>
<li>
Gallery
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
<div id="contents">
<div>
<div class="body">
<div id="adbox">
<img src="images/chair.jpg" alt="Img"> <span class="info"> Whicker Chair <em>$250.00</em> View Details </span>
<div class="details">
<h1>High Quality<br> Wooden Furnitures<br> That's Built to Last.</h1>
<p>
You can choose from our wide selection of furnitures on display. Either for your home, office or other estab- lishments. If you can’t find what you need, we can make it according to your needs.
</p>
</div>
</div>
<ul id="featured">
<li>
<div>
<img src="images/living-room.jpg" alt="Img">
</div>
<div class="details">
<h4>Living Room</h4>
<p>
This website template has been designed by Free Website Templates for you, for free. You can replace all this text with your own text.
</p>
</div>
</li>
<li class="bedroom">
<div>
<img src="images/bedroom.jpg" alt="Img">
</div>
<div class="details">
<h4>Bedroom</h4>
<p>
You can remove any link to our website from this website template, you're free to use this website template without linking back to us.
</p>
</div>
</li>
<li class="kitchen">
<div>
<img src="images/kitchen.jpg" alt="Img">
</div>
<div class="details">
<h4>Kitchen</h4>
<p>
If you're having problems editing this website template, then don't hesitate to ask for help on the Forum.
</p>
</div>
</li>
</ul>
<div class="contact">
<p>
For Order and Inquiries Please Call: <b>760-962-9541</b> Or you can visit us at: <b>4885 Wilson Street<br> Victorville, CA 92392</b>
</p>
</div>
<div class="blog">
<h4>From the Blog</h4>
<div>
<img src="images/carving-small.png" alt="Img"> <span>April 16, 2023</span>
<p>
CC's Carving
</p>
Read More
</div>
<div>
<img src="images/resort-small.png" alt="Img"> <span>April 15, 2023</span>
<p>
5 Star Resorts
</p>
Read More
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div>
<div id="links">
<div class="showroom">
<h4>Visit our Showroom</h4>
<img src="images/show-room.png" alt="Img">
<p>
4885 Wilson Street<br> Victorville, CA 92392<br><br> 760-962-9541<br><br> info#carvedcreations.com
</p>
</div>
<div>
<h4>Recent Blog Posts</h4>
<ul class="posts">
<li>
<span class="time">Apr 16</span>
<p>
The Carving Master & Owner Maybe you’re looking for something diferent, something special.
</p>
</li>
<li>
<span class="time">Apr 15</span>
<p>
5 Star Hotels We Supply And we love the challenge of doing something diferent and something special.
</p>
</li>
<li>
<span class="time">Apr 14</span>
<p>
How To Pick The Right Furniture For You What’s more, they’re absolutely free! You can do a lot with them.
</p>
</li>
</ul>
</div>
<div>
<form action="#" method="post" id="newsletter">
<h4>Join Our Newsletter</h4>
<input type="text" value="Enter Email Address Here For Updates" onBlur="javascript:if(this.value==''){this.value=this.defaultValue;}" onFocus="javascript:if(this.value==this.defaultValue){this.value='';}">
<input type="submit" value="Sign up" class="btn2" />
</form>
<div id="connect">
<h4>Social Media</h4>
</div>
</div>
</div>
<ul class="navigation">
<li>
Home
</li>
<li>
About
</li>
<li>
Gallery
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
<p id="footnote">
© Copyright 2023. All Rights Reserved.
</p>
</div>
</div>
</body>
</html>
In this when i edited in i mean when i remove following one footer background is shrinking from normal size.
<h4>From the Blog</h4>
<div>
<img src="images/carving-small.png" alt="Img"> <span>April 16, 2023</span>
<p>
CC's Carving
</p>
Read More
</div>
<div>
<img src="images/resort-small.png" alt="Img"> <span>April 15, 2023</span>
<p>
5 Star Resorts
</p>
Read More
</div>
</div>
</div>
</div>
after edit footer is shrink from before one
![AFTER EDIT OF HTML ][2]
HTML AFTER EDITED
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Wood Working Website Template</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="header">
<div>
<div id="logo">
<img src="images/logo.png" alt="LOGO">
</div>
<ul id="navigation">
<li class="selected">
Home
</li>
<li>
About
</li>
<li>
Gallery
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
<div id="contents">
<div>
<div class="body">
<div id="adbox">
<img src="images/chair.jpg" alt="Img"> <span class="info"> Whicker Chair <em>$250.00</em> View Details </span>
<div class="details">
<h1>High Quality<br> Wooden Furnitures<br> That's Built to Last.</h1>
<p>
You can choose from our wide selection of furnitures on display. Either for your home, office or other estab- lishments. If you can’t find what you need, we can make it according to your needs.
</p>
</div>
</div>
<ul id="featured">
<li>
<div>
<img src="images/living-room.jpg" alt="Img">
</div>
<div class="details">
<h4>Living Room</h4>
<p>
This website template has been designed by Free Website Templates for you, for free. You can replace all this text with your own text.
</p>
</div>
</li>
<li class="bedroom">
<div>
<img src="images/bedroom.jpg" alt="Img">
</div>
<div class="details">
<h4>Bedroom</h4>
<p>
You can remove any link to our website from this website template, you're free to use this website template without linking back to us.
</p>
</div>
</li>
<li class="kitchen">
<div>
<img src="images/kitchen.jpg" alt="Img">
</div>
<div class="details">
<h4>Kitchen</h4>
<p>
If you're having problems editing this website template, then don't hesitate to ask for help on the Forum.
</p>
</div>
</li>
</ul>
<div class="contact">
<p>
For Order and Inquiries Please Call: <b>760-962-9541</b> Or you can visit us at: <b>4885 Wilson Street<br> Victorville, CA 92392</b>
</p>
</div>
<div class="blog">
</div>
<div id="footer">
<div>
<div id="links">
<div class="showroom">
<h4>Visit our Showroom</h4>
<img src="images/show-room.png" alt="Img">
<p>
4885 Wilson Street<br> Victorville, CA 92392<br><br> 760-962-9541<br><br> info#carvedcreations.com
</p>
</div>
<div>
<h4>Recent Blog Posts</h4>
<ul class="posts">
<li>
<span class="time">Apr 16</span>
<p>
The Carving Master & Owner Maybe you’re looking for something diferent, something special.
</p>
</li>
<li>
<span class="time">Apr 15</span>
<p>
5 Star Hotels We Supply And we love the challenge of doing something diferent and something special.
</p>
</li>
<li>
<span class="time">Apr 14</span>
<p>
How To Pick The Right Furniture For You What’s more, they’re absolutely free! You can do a lot with them.
</p>
</li>
</ul>
</div>
<div>
<form action="#" method="post" id="newsletter">
<h4>Join Our Newsletter</h4>
<input type="text" value="Enter Email Address Here For Updates" onBlur="javascript:if(this.value==''){this.value=this.defaultValue;}" onFocus="javascript:if(this.value==this.defaultValue){this.value='';}">
<input type="submit" value="Sign up" class="btn2" />
</form>
<div id="connect">
<h4>Social Media</h4>
</div>
</div>
</div>
<ul class="navigation">
<li>
Home
</li>
<li>
About
</li>
<li>
Gallery
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
<p id="footnote">
© Copyright 2023. All Rights Reserved.
</p>
</div>
</div>
</body>
</html>
please help as soon as possible...
I guess you removed too many closing div tag.
Maybe this is what you want :
("From the Blog" portion removed)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Wood Working Website Template</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="header">
<div>
<div id="logo">
<img src="images/logo.png" alt="LOGO">
</div>
<ul id="navigation">
<li class="selected">
Home
</li>
<li>
About
</li>
<li>
Gallery
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
<div id="contents">
<div>
<div class="body">
<div id="adbox">
<img src="images/chair.jpg" alt="Img"> <span class="info"> Whicker Chair <em>$250.00</em> View Details </span>
<div class="details">
<h1>High Quality<br> Wooden Furnitures<br> That's Built to Last.</h1>
<p>
You can choose from our wide selection of furnitures on display. Either for your home, office or other estab- lishments. If you can’t find what you need, we can make it according to your needs.
</p>
</div>
</div>
<ul id="featured">
<li>
<div>
<img src="images/living-room.jpg" alt="Img">
</div>
<div class="details">
<h4>Living Room</h4>
<p>
This website template has been designed by Free Website Templates for you, for free. You can replace all this text with your own text.
</p>
</div>
</li>
<li class="bedroom">
<div>
<img src="images/bedroom.jpg" alt="Img">
</div>
<div class="details">
<h4>Bedroom</h4>
<p>
You can remove any link to our website from this website template, you're free to use this website template without linking back to us.
</p>
</div>
</li>
<li class="kitchen">
<div>
<img src="images/kitchen.jpg" alt="Img">
</div>
<div class="details">
<h4>Kitchen</h4>
<p>
If you're having problems editing this website template, then don't hesitate to ask for help on the Forum.
</p>
</div>
</li>
</ul>
<div class="contact">
<p>
For Order and Inquiries Please Call: <b>760-962-9541</b> Or you can visit us at: <b>4885 Wilson Street<br> Victorville, CA 92392</b>
</p>
</div>
<div class="blog">
</div>
</div>
</div>
</div>
<div id="footer">
<div>
<div id="links">
<div class="showroom">
<h4>Visit our Showroom</h4>
<img src="images/show-room.png" alt="Img">
<p>
4885 Wilson Street<br> Victorville, CA 92392<br><br> 760-962-9541<br><br> info#carvedcreations.com
</p>
</div>
<div>
<h4>Recent Blog Posts</h4>
<ul class="posts">
<li>
<span class="time">Apr 16</span>
<p>
The Carving Master & Owner Maybe you’re looking for something diferent, something special.
</p>
</li>
<li>
<span class="time">Apr 15</span>
<p>
5 Star Hotels We Supply And we love the challenge of doing something diferent and something special.
</p>
</li>
<li>
<span class="time">Apr 14</span>
<p>
How To Pick The Right Furniture For You What’s more, they’re absolutely free! You can do a lot with them.
</p>
</li>
</ul>
</div>
<div>
<form action="#" method="post" id="newsletter">
<h4>Join Our Newsletter</h4>
<input type="text" value="Enter Email Address Here For Updates" onBlur="javascript:if(this.value==''){this.value=this.defaultValue;}" onFocus="javascript:if(this.value==this.defaultValue){this.value='';}">
<input type="submit" value="Sign up" class="btn2" />
</form>
<div id="connect">
<h4>Social Media</h4>
</div>
</div>
</div>
<ul class="navigation">
<li>
Home
</li>
<li>
About
</li>
<li>
Gallery
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
<p id="footnote">
© Copyright 2023. All Rights Reserved.
</p>
</div>
</div>
</body>
Replace your <body> tag with this
Updated Body Content
<body>
<div id="header">
<div>
<div id="logo">
<img alt="LOGO" src="images/logo.png">
</div>
<ul id="navigation">
<li class="selected">
Home
</li>
<li>
About
</li>
<li>
Gallery
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
<div id="contents">
<div>
<div class="body">
<div id="adbox">
<img alt="Img" src="images/chair.jpg"> <span class="info"> Whicker Chair <em>$250.00</em> <a class="btn1" href="index.html">View Details</a> </span>
<div class="details">
<h1>High Quality<br> Wooden Furnitures<br> That's Built to Last.</h1>
<p>
You can choose from our wide selection of furnitures on display. Either for your home, office or other estab- lishments. If you can’t find what you need, we can make it according to your needs.
</p>
</div>
</div>
<ul id="featured">
<li>
<div>
<img alt="Img" src="images/living-room.jpg">
</div>
<div class="details">
<h4>Living Room</h4>
<p>
This website template has been designed by Free Website Templates for you, for free. You can replace all this text with your own text.
</p>
</div>
</li>
<li class="bedroom">
<div>
<img alt="Img" src="images/bedroom.jpg">
</div>
<div class="details">
<h4>Bedroom</h4>
<p>
You can remove any link to our website from this website template, you're free to use this website template without linking back to us.
</p>
</div>
</li>
<li class="kitchen">
<div>
<img alt="Img" src="images/kitchen.jpg">
</div>
<div class="details">
<h4>Kitchen</h4>
<p>
If you're having problems editing this website template, then don't hesitate to ask for help on the Forum.
</p>
</div>
</li>
</ul>
<div class="contact">
<p>
For Order and Inquiries Please Call: <b>760-962-9541</b> Or you can visit us at: <b>4885 Wilson Street<br> Victorville, CA 92392</b>
</p>
</div>
<div class="blog">
<h4>From the Blog</h4>
<div>
<img alt="Img" src="images/carving-small.png"> <span>April 16, 2023</span>
<p>
CC's Carving
</p>
<a class="more" href="blog.html">Read More</a>
</div>
<div>
<img alt="Img" src="images/resort-small.png"> <span>April 15, 2023</span>
<p>
5 Star Resorts
</p>
<a class="more" href="blog.html">Read More</a>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div>
<div id="links">
<div class="showroom">
<h4>Visit our Showroom</h4>
<img alt="Img" src="images/show-room.png">
<p>
4885 Wilson Street<br> Victorville, CA 92392<br><br> 760-962-9541<br><br> info#carvedcreations.com
</p>
</div>
<div>
<h4>Recent Blog Posts</h4>
<ul class="posts">
<li>
<span class="time">Apr 16</span>
<p>
The Carving Master & Owner Maybe you’re looking for something diferent, something special.
</p>
</li>
<li>
<span class="time">Apr 15</span>
<p>
5 Star Hotels We Supply And we love the challenge of doing something diferent and something special.
</p>
</li>
<li>
<span class="time">Apr 14</span>
<p>
How To Pick The Right Furniture For You What’s more, they’re absolutely free! You can do a lot with them.
</p>
</li>
</ul>
</div>
<div>
<form id="newsletter" method="post" action="#">
<h4>Join Our Newsletter</h4>
<input type="text" onfocus="javascript:if(this.value==this.defaultValue){this.value='';}" onblur="javascript:if(this.value==''){this.value=this.defaultValue;}" value="Enter Email Address Here For Updates">
<input type="submit" class="btn2" value="Sign up">
</form>
<div id="connect">
<h4>Social Media</h4>
<a class="facebook" target="_blank" href="http://freewebsitetemplates.com/go/facebook/"></a> <a class="googleplus" target="_blank" href="http://freewebsitetemplates.com/go/googleplus/"></a> <a class="twitter" target="_blank" href="http://freewebsitetemplates.com/go/twitter/"></a>
</div>
</div>
</div>
<ul class="navigation">
<li>
Home
</li>
<li>
About
</li>
<li>
Gallery
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
<p id="footnote">
© Copyright 2023. All Rights Reserved.
</p>
</div>
</div>
</body>
You removed some divs which made the layout change.
Try closing the divs just after
<div class="blog"></div>
Add 3 closing
</div>
I have some troubles with my footer on a website. Footer is not displaying at the bottom of the page but it starts right below the header and covers elements that are under it. For better understanding I made fiddle for it and screenshot
But its like this:
<div class="mens">
<div class="main">
<div class="wrap">
<div class="section group">
<div class="cont span_2_of_3">
<h2 class="head">PRIPOROČAMO</h2>
<div class="top-box">
and then there are some products and then there are the end divs for this:
</div>
</div>
</div>
</div>
</div>
</div>
And then follows the footer:
<footer class="footer-2 bg-midnight-blue">
<div class="container">
<nav class="pull-left">
<ul>
<li class="active">
Home
</li>
<li>
Company
</li>
<li>
Portfolio
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
</nav>
<div class="social-btns pull-right">
<div class="fui-vimeo"></div><div class="fui-vimeo"></div>
<div class="fui-facebook"></div><div class="fui-facebook"></div>
<div class="fui-twitter"></div><div class="fui-twitter"></div>
</div>
<div class="additional-links">
Be sure to take a look to our Terms of Use and Privacy Policy
</div>
</div>
</footer>
And I know its a lot of code but I would really appreciate if someone could look at it. Thanks.
use this to reset ur css
.clearfix:before,.clearfix:after{content: '.';display: block;overflow: hidden;visibility: hidden;font-size: 0;line-height: 0;width: 0;height: 0;clear: both;}
.clearfix {overflow: auto;zoom: 1;}
and add clearfix class in parent div where in child u have used float like in
<div class="page-wrapper clearfix">
<div class="main clearfix">
<footer class="footer-2 bg-midnight-blue clearfix">