I have the following HTML :
<div id="ohsnap">
<div class="alert alert-red">First</div>
<div class="alert alert-yellow">Second</div>
</div>
With the following CSS :
#ohsnap {
position: absolute;
bottom: 5px;
right:5px;
margin-left: 5px;
z-index:99;
}
.alert {
text-align: right;
margin-top: 10px;
padding: 15px;
border: 1px solid #eed3d7;
border-radius: 4px;
}
.alert-red {
color: white;
background-color: #DA4453;
}
For some reason, the alerts (child div) takes all the same width. When the biggest div is removed, the width of all alerts divs are recalculated... I would like each div to take only the necessary space to show the text inside and not getting resized when others are delete.
What's the necessary CSS for that?
Fixed with
.alert {
float: right;
clear: right;
}
jsFiddle Demo
Floating is an option, but it allows the alert boxes to get outside the edges of their container. Another option would be:
<div id="ohsnap">
<!-- note BRs added below -->
<div class="alert alert-red">First</div><br>
<div class="alert alert-yellow">Second</div><br>
</div>
And add this to the CSS:
.alert { display: inline-block }
Related
I tried to add magin-top to a div style .. but it's not working
Here is the code
.side {
margin-left: 65%;
margin-top: 3%;
margin-right: 3%;
border: 1px solid;
}
.home {
margin-left: 3%;
margin-top: 3%;
width: 62%;
border: 1px solid;
float: left;
}
.home h1 {
margin-top: 0;
}
.side h1 {
margin-top: 0;
}
<div class="home">
<h1>Home</h1>
<p>Just a template.</p>
</div>
<div class="side">
<h1>Widget Header</h1>
<hr>
<p>Widget content.</p>
</div>
I expect the "side" div to be at the same line with "home" div
When you assign float:left to an element,the element shifts to that direction and the other elements gets wrapped around it.If you inspect the page, you can see that .side covers the total width of the page and .home is sitting just over it.To make .side align with .home,minimise both the width of .home and the left margin of .side so that both of the div can be accomodated with the width of the page.Next apply float:left to .side, so that it can get aligned with .home . Here's a working solution:-
<html>
<head>
<style>
.home {
margin-left: 3%;
margin-top: 3%;
width: 50%;
border: 1px solid;
float: left;
}
.side {
margin-left:5%;
margin-top: 3%;
margin-right: 3%;
float:left;
border: 1px solid;
}
</style>
</head>
<body>
<div class="home">
<h1>Home</h1>
<p>Just a template.</p>
</div>
<div class="side">
<h1>Widget Header</h1>
<hr>
<p>Widget content.</p>
</div>
</body>
</html>
Here is a link of a video that will give you a clear understanding about floats: https://www.youtube.com/watch?v=xara4Z1b18I
is this what you want? check here. if so, remove margin-top from .home
i need it to be like this .. http://imgur.com/tIUgEc1
when i remove margin-top and add padding-top i get this .. http://imgur.com/ThaHHUu
Use:
* {
box-sizing: border-box;
}
.home {
margin-top: 0;
//more code....
}
The problem is that you are using percentages for your margin-top properties (what exactly is 3% a percentage of?). You should instead consider using absolute pixel values, or wrap your two columns in another container for which would have a single unified margin-top.
On a side note (pardon the pun) your side element should also float: right if you wish it to carry out the same behaviour as home. Removing margin-left and setting a width will make it sit correctly beside the home column.
Koda
I have this code here:
<div style="border:3px solid #808080;">
<h1 style="text-transform: uppercase;font-size: 38px;color: #808080;text-align: center;">Lowell</h1>
<div class="column-1">
<img src="images/ruler-icon.png">
</div>
<div class="column-2">
<img src="images/bed-icon.png">
</div>
<div class="column-3">
<img src="images/bath-icon.png">
</div>
</div>
my problem is that the border does not go over the column-1, column-2, column-3...those elements are floating left, how do I get them to be included in the border?
Here is the CSS
.column-1, .column-2, .column-3
{
float:left;
width: 33%;
border-right: 3px solid #808080;
height: 52px;
padding: 10px;
}
Either add a div in parent with clear:both property right after the floated divs as mentioned by RemyaJ. like this
https://jsfiddle.net/zmasvt8b/
Or
Simply give overflow:hidden property to the parent div. Like this
https://jsfiddle.net/jv5xtLg9/
I realize you've already chosen an answer, but here is an alternative - using flexbox. I also separated all the CSS from the HTML (like it should be!)
.container {
/* Important for columns */
display: -webkit-flex;
display: flex;
}
.item {
/* Important for columns */
flex-grow: 1;
border: 3px solid #808080;
border-top: none;
height: 52px;
padding: 10px;
}
.heading {
border: 3px solid #808080;
margin: 0;
text-transform: uppercase;
font-size: 38px;
color: #808080;
text-align: center;
}
/* Remove duplicate borders */
.item-2 {
border-left: none;
border-right: none;
}
<h1 class="heading">Lowell</h1>
<div class="container">
<div class="item item-1">
<img src="images/ruler-icon.png">
</div>
<div class="item item-2">
<img src="images/bed-icon.png">
</div>
<div class="item item-3">
<img src="images/bath-icon.png">
</div>
</div>
Add a div with style clear:both after the floated divs inside parent div. This will hopefully fix this issue.
I think this is the css you need. Choose the width according to your needs.
.column-1, .column-2, .column-3
{
width: 30%;
border-right: 3px solid #808080;
height: 52px;
padding: 10px;
display:inline-block;
}
The reason for this is that parent elements are never to contain floated elements. To make this happen, just add overflow:auto; to your main div. That will force the div to contain floated elements that "overflow" the container.
There are other, probably better ways to accomplish the same thing but this is the easiest.
Never, ever add HTML elements to do what CSS can and should do.
I have a <div> with a number of sub-elements (which happen to be custom-sized buttons). It can have between 1 and 3 buttons.
Example of HTML with 2 buttons:
<div id="head">
<div id="control-buttons-container">
<button class="control-button">some button text</button>
<button class="control-button">proceed with this button</button>
</div>
</div>
When there are 3 buttons, they fill the entire <div>, so it is not an issue. However, when there are 1 or 2 buttons, they need to be centered but I can't seem to accomplish this without introducing ridiculous conditional margins or something.
How can I modify this CSS so that <div> elements with 1 or 2 of these buttons show the buttons centered within the div?
Please refer to the Fiddle: https://jsfiddle.net/bf33wc6w/1/
Edit: With only 2 buttons, I don't want them to be spread out. I want them to be in the center with only ~2px between them similar to their spacing for when there are 3 buttons.
You could set inline block on the items, with container set to text align center.
.control-buttons-container {
text-align: center;
font-size: 0; /*fix inline block gap*/
}
.control-button {
display: inline-block;
vertical-align: top;
font-size: 12px; /*reset font size*/
}
JSFIDDLE DEMO
.control-buttons-container {
text-align: center;
font-size: 0; /*fix inline block gap*/
}
.control-button {
background-color: #0E80B4;
color: white;
outline: none;
height: 73px;
width: 128px;
margin: 3px 1.5px;
display: inline-block;
vertical-align: top;
font-size: 12px; /*reset font size*/
}
.control-button:hover {
background-color: #3FA9DB;
}
#head, #body, #foot {
border: 1px solid red;
position: absolute;
width: 396px;
height: 80px;
left: 0;
}
#head {
top: 0;
}
#body {
bottom: 50%;
-ms-transform: translateY(50%);
-webkit-transform: translateY(50%);
transform: translateY(50%);
}
#foot {
bottom: 0;
}
<div id="head">
<div class="control-buttons-container">
<button class="control-button">some button text</button>
<button class="control-button">proceed with this button</button>
<button class="control-button">Seth Rollins, WWE Champion</button>
</div>
</div>
<div id="body">
<div class="control-buttons-container">
<button class="control-button">proceed with this button</button>
<button class="control-button">Seth Rollins, WWE Champion</button>
</div>
</div>
<div id="foot">
<div class="control-buttons-container">
<button class="control-button">Seth Rollins, WWE Champion</button>
</div>
</div>
Updates:
Fixed same id being used multiple times on a single page, which is in valid HTML - changed it to class.
Improved the position of middle block, make it to always stay in the middle more accurately - by using CSS transform.
Merged some duplicated CSS rules.
Like this:https://jsfiddle.net/bf33wc6w/7/
All I did was change your float to none and the margin to auto for the left and right margin?
.control-button {
background-color: #0E80B4;
color: white;
outline: none;
border: none;
height: 73px;
width: 128px;
margin: 3px auto;
}
Add these style rules:
#head, #body, #foot { text-align: center; }
#control-buttons-container { display: inline-block; }
As an aside, you shouldn't use the same id (control-buttons-container) multiple times in one document. You should use a classname instead.
Updated fiddle: https://jsfiddle.net/mr8e7kyt/
Try something like this:
<div id="control-buttons-container">
<div class="col-1">
<button class="control-button">some button text</button>
</div>
<div class="col-2">
<button class="control-button">proceed with this button</button>
</div>
<div class="col-3">
<button class="control-button">Seth Rollins, WWE Champion</button>
</div>
</div>
<div id="control-buttons-container">
<div class="col-1">
</div>
<div class="col-2">
<button class="control-button">proceed with this button</button>
</div>
<div class="col-3">
</div>
</div>
.control-button {
background-color: #0E80B4;
color: white;
outline: none;
border: none;
float: left;
height: 73px;
width: 100%;
}
.control-button:hover {
background-color: #3FA9DB;
}
#control-buttons-container {
max-width: 400px;
padding: 1px;
border: 1px solid red;
}
.col-1, .col-2, .col-3 {
width: 32.6%;
display: inline-block;
margin: auto
}
Isn't flawless, but it was made in a couple of minutes and gets the job done: JSFiddle
For the containers without 3 items you should remove the float: left; for the buttons inside it. Leave it for the one with 3 items. Then you can just set text-align: center; on the container.
You can add a class like no-float on the containers you want to control whether its children should be floated or not.
https://jsfiddle.net/bf33wc6w/10/
This answer will probably help you out. Wrap your buttons in a container, give it a fixed width, and change margin to auto. Be sure to remove float: left.
After thoroughly researching for the way to fix this I have still not found the answer I seek. I finally decide to post my problem on stackoverflow.com because I finally give up trying to find the answer. What I get as a result is two boxes with content on top and one box on the bottom.
Here is the CSS code:
#content_area
{
overflow: hidden;
display: inline-block;
background: white;
margin-top: 20px;
margin-right: 110px;
margin-left: 110px;
margin-bottom: 20px;
}
.box
{
display:inline-block;
width: 33.33%;
float: left;
background: #FFFFFF;
padding: 15px;
}
Here is the HTML Code:
<div>
<div class="box">
//enter text here
</div>
<div class="box">
//enter text here
</div>
<div class="box">
//enter text here
</div>
</div>
The problem is your padding, as mentioned above.
Here is a fiddle with the padding removed and colours added: http://jsfiddle.net/gj0wmgym
.box
{
display:inline-block;
width: 33.33%;
float: left;
background: #FFFFFF;
}
The problem with your code is that your .box class assigns a width of 33%, with additional padding. This leads to a total width of more than 100%. Padding is added to the .box's initial width because that's how the default box model works in CSS.
To fix this problem, add this line to the .box's style declarations:
box-sizing: border-box;
You can see a live demo here. If you want to learn more about the box model, this article by Chris Coyier is an excellent reference.
From what I can tell, your floats are working correctly.
Your html was missing the id attribute, so make sure to add that to your html.
What you are probably expecting is for the floats to not wrap to the next line, which is because the padding gets added to the width size (the elements are greater than 33%). You instead need to set the box sizing attribute see this article
* {
box-sizing:border-box;
}
#content_area
{
overflow: hidden;
display: inline-block;
background: white;
margin-top: 20px;
margin-right: 110px;
margin-left: 110px;
margin-bottom: 20px;
}
.box
{
display:inline-block;
width: 33.33%;
float: left;
background: #FFFFFF;
padding: 15px;
}
<div id="content_area">
<div class="box">
//enter text here
</div>
<div class="box">
//enter text here
</div>
<div class="box">
//enter text here
</div>
</div>
when I'm resizing my browser-window the blue buttons go below the logo on the left, on the same line as the text "Welkom Bart" although they are two different layers. I want the text "Welkom Bart" to lower as well, so they are not on the same line. What do I need to add to my css?
html e.g.
<div id="mainmenu">
<div id="logo"><img ... /></div>
<div id="usermenu">Buttons</div>
</div>
<div id="maintitle">
<h2>Welkom Bart</h2>
<hr />
</div>
css
#mainmenu {
height: 100px;
position: relative;
}
#logo {
float: left;
width: 200px;
margin-right: 20px;
}
#usermenu {
float: right;
}
#maintitle {
margin-bottom: 20px;
}
#maintitle hr {
color: #56c2e1;
display: block;
height: 1px;
border: 0;
border-top: 1px solid #56c2e1;
margin: 10px 0;
}
Add clear:both to #maintitle =)
Add overflow:hidden to #mainmenu. This will cause its height to include all floated elements, such as your #usermenu element, allowing flow to continue underneath it.
Use this
<div id="maintitle" style="width:100%">
<h2>Welkom Bart</h2>
<hr />