This question already has answers here:
What does the CSS rule "clear: both" do?
(5 answers)
Closed 7 years ago.
I was trying to understand CSS clear property. I see that it adds a new line and prevents other elements from overlapping. I have concluded it with my personal observations and some readings.
This was something I fiddled with:
.div1 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73AD21;
}
.div2 {
border: 1px solid red;
clear: left;
}
<h2>Using clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 - remove
<mark>clear:left</mark> and see the impact</div>
How can you explain this to non-programmers. Say your wife?
Lets say we have two rows, where each row has 3 chairs.
Now imagine you are sitting on the chair in the middle of first row.
If you say clear:left, that means you're not allowing anybody to sit to your left, likewise, if you say clear:right, you are not allowing anybody to sit to your right.
And if you say clear:both you are not allowing anybody to sit on either side and to choose the next row of chairs!
Related
This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 1 year ago.
I am trying to allign both img and text into one where image floats to left and text floats to right. The results I am trying to achieve:
And this is my result:
As you can see my image is going out of section for some reason
My current code:
#intromessage {
border: 1px solid #cccccc;
text-align: right;
}
img {
float: left;
width: 50%;
border: 1px solid #cccccc;
}
<section id="intromessage">
<h2>WELCOME TO BOOTWORLD</h2>
<p>
BootWorld is the largest online footwear retailer in the UK. <span> Our shop </span>always has stock of the latest designer footwear
at the most competitive prices. Want to know more about us or our products, why not
<span>send us a message.</span>
</p>
<img alt="shoes" src="images/boots.png">
</section>
Use display:flex; on the parent elements and wrap the h2 and p tag in a div so the two child divs in the parent element display as a flex row. The id='cont' element will have a display flex with flex-direction as column
EDIT: *as noted by the editor of this question, this question in its purest form does indeed have an answer which I will include for future persons looking at this answer...
The issue the OP was having is that they used a float on their img element. Without clearing that float their image was not floating to the left as they intended, but showing up underneath the sibling text content it was supposed to be floating to the left of. The image with the style float: left; is within the div intromessage, yet on the page it is outside that container div. Floated objects do not add to the height of the object they reside in. The issue was there was no clear: called on the float. To fix this we add an empty div element and style it with clear: left on a left floating div, or clear: right on a right floating div, or clear: both if you want to clear both the left and right float.
<div style="clear: both;"></div>
Important from MDN: The clear CSS property sets whether an element must be moved below (cleared) floating elements that precede it.
A more modern way to deal with this issue, is to use grid or flex, see snippit below:
#intromessage {
display: flex;
border: 1px solid #cccccc;
}
#cont {
padding: 5px;
display: flex;
flex-direction: column;
}
h2{
font-size: 1rem;
}
img {
width: 50%;
border: 1px solid #cccccc;
padding: 5px;
}
<section id="intromessage">
<img alt="shoes" src="https://cdn11.bigcommerce.com/s-h8hjw/products/927/images/735/WBHQ19-Retail-Product-OnWhite-Boots-M-1500x1425__00368.1599677007.475.500.png?c=2">
<div id="cont">
<h2>WELCOME TO BOOTWORLD</h2>
<p>
BootWorld is the largest online footwear retailer in the UK. <span> Our shop </span>always has stock of the latest designer footwear at the most competitive prices. Want to know more about us or our products, why not
<span>send us a message.</span>
</p>
</div>
</section>
you can use grid view or flexbox to achieve that, but also you can go on with your code using position and define width of each element,
here is how to do it, try the snippet.
#intromessage {
position:relative;
width:100%;
border: 1px solid #cccccc;
}
p {
position: absolute;
margin-left:52%;
}
img {
position: relative;
width: 50%;
border: 1px solid #cccccc;
margin-left:1%;
}
<section id="intromessage">
<h2>WELCOME TO BOOTWORLD</h2>
<p>
BootWorld is the largest online footwear retailer in the UK. <span> Our shop </span>always has stock of the latest designer footwear at the most competitive prices. Want to know more about us or our products, why not
<span>send us a message.</span>
</p>
<img alt="shoes" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSg0p7vWEFpPD08JvLJgJsAKP0_EkTYg1v7og&usqp=CAU">
</section>
This question already has answers here:
HTML Div border not showing
(3 answers)
Closed 2 years ago.
I am trying to make a foot print for a cool look, but it won't show
here's my code:
.footprint {
width: 100px;
height: 50px;
border-color: gray;
border: 3px;
border-radius: 20px;
}
<div class="footprint"></div>
welcome to SO!
Somebody already found a solution to your problem here:
CSS Property Border-Color Not Working
A div by default has no border-style and no border-width, therefore the border will not be shown.
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 4 years ago.
I have this code:
https://jsfiddle.net/105nfcze/55/
#footer-a {
width: 50%;
background: black;
display: inline-block;
}
#footer-b {
width: 50%;
background: blue;
display: inline-block;
text-align: center;
}
<div class="content-wrapc">
<p id="footer-a"> Footer </p>
<p id="footer-b">
test 1
test 12
test 13 </p>
</div>
I have also followed this link: Display two divs next to each other where each has a width of 50%
I have also tried floating, as what is said in this link :
How to place two divs next to each other?
But still I do not get the two p's places next to each other. I tried several things and looked up several QA's. Hope someone can advise and also explain why this happens..
Use flex on the parent:
.content-wrapc {
/* add this */
display: flex;
}
#footer-a {
width: 50%;
background: black;
}
#footer-b {
width: 50%;
background: blue;
text-align: center;
}
<div class="content-wrapc">
<p id="footer-a"> Footer </p>
<p id="footer-b">
test 1
test 12
test 13
</p>
</div>
The problem with your original code is that you use inline block - this adds a space if there is any space between your elements (think of words in a sentence, if there is space between them, a space is added) which is why the two 50% elements can't sit next to each other
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have a div like this:
<div id="information">
<a href="https://www.com.edu"><img src="https://com-bb-dev.com.edu/branding/themes/as_2012_orig/images/bbbanner.png"
style="position: absolute;left: 296px;"></a>
</div>
When the monitor resolution is 1920x1200 it appears exactly where I want. However, if you resize the window or change the resolution to some lower values the position of the image changes. What is the proper way to make sure that an image aligns with an element below it? I have tried percentages but that does not seem to be any different from static px values.
e.g.
https://i.gyazo.com/cf47cd0ee4ff20b3a9df48b3cc56d44d.png
If you need to see the rest of the page's construction the url is https://com-bb-dev.com.edu. It is verified via SSL.
Current page construction:
<div id="information">
<a href="https://www.com.edu"><img src="https://com-bb-dev.com.edu/branding/themes/as_2012_orig/images/bbbanner.png" style="
position: absolute;
/* left: 296px; */
margin-left: 297px;
"></a>
</div>
<div id="loginPageContainer">
<div id="loginPane">
<div id="loginContainer">
<div class="clearfix loginBody">
<div id="newStu">Students: Your initial log on is your WebAdvisor Username and your password is your seven digit COM ID number. To keep your account secure, please use this site to change your password at your earliest convenience.</div>
<div id="seeClasses">You will not see your course within your Course List in Blackboard until the official start date (review your class schedule).</div>
css:
#information {
height: 60px;
padding-top: 10px;
padding-bottom: 10px;
}
#loginPageContainer {
background: #eaeaea;
display: table;
text-align: center;
width: 100%;
padding-top: 30px;
height: 569px;
zoom: 1;
}
#loginPane {
vertical-align: top;
display: inline-block;
background: white;
margin-bottom: 3px;
height: 541px;
-webkit-box-shadow: 0px 3px 22px 5px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 3px 22px 5px rgba(0,0,0,0.75);
box-shadow: 0px 3px 22px 5px rgba(0,0,0,0.75);
}
#loginContainer .loginBody {
width: 585px;
}
It took a minute to see what you meant and I had already written a long rant chastising you until I realized what you were really asking.
1) There's no need for you to be using aboslute positioning. What you really need is a container, or one of your existing elements acting like a container.
2) This is where bootstrap would come in very handy. You could just add <div class="container"> around both elements and it would be perfect.
3) For you, you have no container elements inside #information and just your logo <a>. So you could mimic the container from the next section with your <a> if you can't alter any HTML but at quick glance you're going to need media queries to get it perfect at every resolution. Easiest thing would be to add a container around both problematic sections.
If you can't update the HTML, edit your question and include that detail and maybe I can look at it another way.
Edit: Since you can change your code and assuming you want your background colors to continue to expand the width of the viewport:
<div id="information">
<div class="container">
<a class="logo"></a>
</div>
</div>
<div id="logingPageContainer">
<div class="container">
<div class="pane1"></div>
<div class="pane2"></div>
</div>
</div>
With that structure you can now do CSS like:
.pane1, .pane2 {
display: block;
float: left;
width: 50%; /*Change this width as required or split this for each pane if need different widths */
}
.container {
width: 80%;
margin: 0 auto;
}
That will get you the basic way there. For responsive, you could use media queries because 80% probably won't look great on all devices and the widths of your panes aren't going to look good on all devices without more CSS adjusting the children of each pane. Right now it looks like everything is in static pixels and that's going to always cause problems in percentage widths. This is just a concept though so adjust where needed but that should get you in the right direction. Comment if you need more help.
Add the following CSS:
#loginPane {
position: absolute;
left: 10px; //or however many you want, adjust it to make it at the same position.
}
That should work.
EDIT:
Use this for positioning logo above panel:
<script>
var paneOffset=document.getElementById('loginPane').offset();
var panepx=paneOffset.split(',', 1)[0]
document.getElementById('yourImgId').style.left=panepx + 'px';
Also, add a position: absolute; to your logo.
This question already has answers here:
Is there a reason why CSS doesn't support ids and classes, starting from numbers?
(8 answers)
Closed 8 years ago.
I have this html;
<div class="1"><br/>hi</div>
<div class="2"><br/>hi</div>
<div class="3"><br/>hi</div>
<div class="4"><br/>hi</div>
and then I added normal CSS formatting to the divs;
div{
height: 100px;
width: 100px;
border-radius: 100%;
margin: 20px;
display: inline-block;
text-align: center;
}
and then i wanted each div to be a different colour so I used the classes like this;
.1{
background-color: pink;
}
.2{
background-color: red;
}
.3{
background-color: orange;
}
.4{
background-color: yellow;
}
I am writing this in dreamweaver and when i click on the divs the little class thing tells me that they are coloured and the code is working, but when i preview in a browser the colours are not showing up and I just get the div part of the CSS.
it's probably very obvious but I can't think of why this is happening.
Thanks :)
Please avoid using classes with number at the beginning. It will fail for sure.
You can use for example cl1, cl2, cl3, etc.