Created a wrapper div called top div, got a p tag called Title aligned to the left and another div called buttonCP containing 4 p tags, aligned to the center with margin 0 auto. Now I want a final p tag called Button5 aligned to the right within top div, just cant seem to do it. Inspecting element shows that buttonCP margin auto could be pushing the final p tag out of the wrapper div. Any idea how I can have Button5 on the same line as Title and buttonCP? Thanks in advance!
Here is jsfiddle link:
https://jsfiddle.net/6r6jzypy/
<style> #topdiv {
background-color: #F0F0F0;
height: 40px;
width: 100%;
border: 2px solid #D8D8D8;
float:left;
}
p[name=heading] {
margin: 0;
font-weight: bold;
padding: 10px 8px 6px 8px;
float:left;
font-size: 1.0em;
}
#Result {
margin: 0;
float: right;
}
.button1 {
background-color: #D8D8D8;
margin-top: 3px;
float: left;
padding: 6px 8px 6px 8px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
border: 2px solid #D8D8D8;
border-right: 1px;
}
.button2 {
background-color: #D8D8D8;
margin-top: 3px;
float: left;
padding: 6px 8px 6px 8px;
border: 2px solid #D8D8D8;
border-right: 1px;
}
.button3 {
background-color: #D8D8D8;
margin-top: 3px;
float: left;
padding: 6px 8px 6px 8px;
border: 2px solid #D8D8D8;
border-right: 1px;
}
.button4 {
background-color: #D8D8D8;
margin-top: 3px;
float: left;
padding: 6px 8px 6px 8px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border: 2px solid #D8D8D8;
}
#buttonCP {
height: 34px;
width: 290px;
margin: 0 auto;
}
</style>
<body>
<div id="topdiv">
<p name="heading">Title</p>
<div id="buttonCP">
<p class="button1">Button1</p>
<p class="button2">Button2</p>
<p class="button3">Button3</p>
<p class="button4">Button4</p>
</div>
<p id="Result">Button5</p>
</div>
</body>
try this :
<div id="topdiv">
<p name="heading">Title</p>
<p id="Result">Button5</p>
<div id="buttonCP">
<p class="button1">Button1</p>
<p class="button2">Button2</p>
<p class="button3">Button3</p>
<p class="button4">Button4</p>
</div>
</div>
Live demo
Related
I'm trying to create an input form and the right side of my input boxes keep getting cut off. My code is as follows:
HTML/CSS
.add_idea_box {
background-color: #ffffff;
min-width: 1110px;
margin: 0px 20px 20px 20px;
overflow: hidden;
border: solid 1px #6a6a6a;
box-shadow: 3px 3px 3px #cecdcd;
-moz-box-shadow: 3px 3px 3px #cecdcd;
-webkit-box-shadow: 3px 3px 3px #cecdcd;
text-align: center;
padding-right: 25px;
}
.add_idea_box_left {
float: left;
overflow: hidden;
width: 130px;
height: 200px;
}
.add_idea_box_left_top {
width: 100%;
padding: 15px 20px 20px 0px;
}
.add_idea_box_left_bottom {
width: 100%;
text-align: left;
padding-left: 22px;
}
.add_idea_box_left_bottom_row {
width: 100%;
height: 27px;
font-family: "Arial";
font-size: 85%;
color: #363636;
}
.red_circle {
display: inline;
float: left;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #ff5f57;
margin-right: 7px;
}
.yellow_circle {
display: inline;
float: left;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #ffbd2e;
margin-right: 7px;
}
.green_circle {
display: inline;
float: left;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #29cb41;
margin-right: 7px;
}
.add_idea_box_right {
overflow: hidden;
text-align: left;
min-height: 200px;
padding: 20px 0px 0px 25px;
border-left: solid 1px #bab6b6;
}
.add_idea_box_right_top {
overflow: visible;
width: 100%;
}
.add_idea_box_right_bottom {
overflow: hidden;
float: right;
height: 40px;
margin-top: 10px;
margin-bottom: 10px;
}
input[type=submit] {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
padding: 10px 10px;
background: -moz-linear-gradient(
top,
#fa8e00 0%,
#ab0000);
background: -webkit-gradient(
linear, left top, left bottom,
from(#fa8e00),
to(#ab0000));
border: 1px solid #7d0000;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
text-shadow:
0px -1px 0px rgba(000,000,000,0.4),
0px 1px 0px rgba(255,255,255,0.3);
}
input[type=text] {
width: 100%;
height: 20px;
padding: 10px 10px;
border: 1px solid #bab6b6;
-webkit-border-radius: 6px;
border-radius: 6px;
font-family: "Arial";
color: #bab6b6;
background: #efeeee;
}
textarea {
width: 100%;
height: 60px;
padding: 10px 10px;
border: 1px solid #bab6b6;
-webkit-border-radius: 6px;
border-radius: 6px;
margin-top: 10px;
font-family: "Arial";
color: #bab6b6;
background: #efeeee;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="application/xml; charset=utf-8">
<meta name="viewport" content="initial-scale=1">
<html lang="en">
<head>
<title>GroupTrades</title>
<!-- CSS -->
<link type="text/css" href="css/ideaboard2.css" rel="stylesheet" media="screen">
</head>
<body>
<!-- ADD AN IDEA BOX -->
<div class="add_idea_box">
<div class="add_idea_box_left">
<div class="add_idea_box_left_top">
</div>
<div class="add_idea_box_left_bottom">
<div class="add_idea_box_left_bottom_row">
<div class="green_circle"></div>5 accepted
</div>
<div class="add_idea_box_left_bottom_row">
<div class="yellow_circle"></div>2 pending
</div>
<div class="add_idea_box_left_bottom_row">
<div class="red_circle"></div>3 rejected
</div>
</div>
</div>
<div class="add_idea_box_right">
<form method="post" action="dashboard.php">
<div class="add_idea_box_right_top">
<input type="hidden" name="group" value="<?echo $group;?>">
<input type="text" name="title" value="Title" autofocus>
<textarea value="idea" id="idea">Idea</textarea>
</div>
<div class="add_idea_box_right_bottom">
<input type="submit" id="Submit" name="Submit" value="Add Idea">
</div>
</form>
</div>
</div>
<br><br><br>
</body>
A live version is at: http://quickid.net/test2/ideaboard2.html ... You can see that the right side of the input box and the text box are both getting cut off and their right borders are not showing.
Any help would be greatly appreciated. Thanks!
Add box-sizing property to input and text-area and style accordingly
CSS
.add_idea_box_right_top input[type="text"],
.add_idea_box_right_top textarea{
box-sizing:border-box;
}
hope this helps..
It's because you have set all of these properties on your input element:
width: 100%
padding: 10px
border: 2px
So the input element takes up 100% of the width and it also has 10px padding both left and right on top of that and 2px border on top of that. They all add up so the total width of your element is more than 100% of the width of the containing element.
Try modifying the padding of this class, so try this one.
FROM THIS:
.add_idea_box_right {
overflow: hidden;
text-align: left;
min-height: 200px;
padding: 20px 0px 0px 25px;
border-left: solid 1px #bab6b6;
}
TO THIS:
.add_idea_box_right {
overflow: hidden;
text-align: left;
min-height: 200px;
padding: 20px 25px 0px 25px;
border-left: solid 1px #bab6b6;
}
Let me know if it helped you.
It is because 100% width as suggested is interfering with some of the padding, reduce the width to a smaller percentage and center your input field for it to scale better with increasing resolutions.
Edit: If you inspect element on mozilla you can clearly see where the overlap happens with the pick element thing!
All
this is my first stack overflow post, thanks in advance for any help
I am putting together a page with content and divs with image background, when I try to float two divs on the right one on top of each other, having trouble flow content to the left, I have used clear so one div is on top of the other one on the right, but the content I am trying to put on the left is align with the second image where the clear was applied then there is a big gap for the first div, any suggestions?
I have enclosed code here
.img1 {
float: right;
width: 250px;
box-shadow: 7px 7px 5px #cccccc;
border-radius: 10px;
border: 1px solid #f5aca6;
background: url("url") no-repeat 50% 10px;
background-color: #ffecec;
padding: 70px 5px 10px 5px;
}
.img2 {
float: right;
background: url("url")no-repeat 100% 100%;
margin-top: -20px;
margin-bottom: 10px;
margin-left: 30px;
background-color: #006534;
color: #d2d2d2;
line-height: 20px;
font-size: 13px;
width: 250px;
border: thin silver solid;
box-shadow: 7px 7px 5px #cccccc;
padding: 5px 5px 0px 5px;
}
HTML
<div class="img1">content</div>
<p class="clear"></p>
<div class="img2">content</div>
<div>Content.........</div>
Try this, I believe it's what you asked for:
HTML:
<div style="float: left;">
<div>Content.........</div>
</div>
<div style="float: right;">
<div class="img1">content</div>
<br>
<div class="img2">content</div>
</div>
CSS:
.img1 {
width: 250px;
box-shadow: 7px 7px 5px #cccccc;
border-radius: 10px;
border: 1px solid #f5aca6;
background: url("url") no-repeat 50% 10px;
background-color: #ffecec;
}
.img2 {
background: url("url")no-repeat 100% 100%;
background-color: #006534;
color: #d2d2d2;
line-height: 20px;
font-size: 13px;
width: 250px;
border: thin silver solid;
box-shadow: 7px 7px 5px #cccccc;
}
JsFiddle: https://jsfiddle.net/nmzwLn2q/1/
Have 2 nav buttons created with DIVs, trying to center both within a parent DIV in a responsive layout. The width of the parent DIV is responsive but the width of the buttons are fixed. Both buttons should be next to each other centered within the parent, with even space on both sides.
Looked at a few other posts about this, tried all the solutions including adding: margin:0px auto; - and also tried adding both: margin-left: auto; margin-right: auto - neither option has worked.
Don't know if it's an issue with some of the button style CSS code that's preventing it from being able to center, or if I'm missing something else.
Here's the code:
#head-map {
clear: none;
float: left;
margin-left: 30%;
width: 100%;
display: block;
margin-right: 1%;
text-align: center;
padding-top: 0px;
}
#map-button {
height: 35px;
width: 70px;
background-color: #12A483;
border-color: #9dacc8;
border-style: solid;
border-width: 3px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
text-align: center;
padding-top: 7px;
box-shadow: 0px 2px 7px #292929;
-moz-box-shadow: 0px 3px 8px #292929;
-webkit-box-shadow: 0px 3px 8px #292929;
float: left;
display: inline-block;
margin: 0px auto;
}
#espanol-button {
height: 35px;
width: 100px;
background-color: #12A483;
border-color: #9dacc8;
border-style: solid;
border-width: 3px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
text-align: center;
padding-top: 7px;
box-shadow: 0px 2px 7px #292929;
-moz-box-shadow: 0px 3px 8px #292929;
-webkit-box-shadow: 0px 3px 8px #292929;
float: left;
display: inline-block;
margin: 0px auto;
}
a.whitelink {
color: white;
}
a.whitelink:hover {
color: #00133e;
text-decoration: none;
}
<div id="head-map">
<div id="map-button"><a class="whitelink" href="#" target="new">Map</a>
</div>
<div id="espanol-button"><a class="whitelink" href="#" target="self">Español</a>
</div>
</div>
Make the inner divs display: inline-block and center them with text-align: center on the parent. Remove the floats.
Simplified example
Note how each inner div has no whitespace between it in the markup. This prevents extra whitespace being displayed between inline elements.
div {
text-align: center;
}
div > div {
display: inline-block;
width: 100px;
background: #F00;
margin: 10px;
}
<div id="head-map">
<div id="map-button"><a class="whitelink" href="#" target="new">Map</a>
</div><div id="espanol-button"><a class="whitelink" href="#" target="self">Español</a>
</div>
</div>
That's because you're using float: left; and causing text-align: center; wont work. Remove the float. Example:
#head-map {
clear: none;
width: 100%;
display: block;
margin-right: 1%;
text-align: center;
padding-top: 0px;
}
#map-button {
height: 35px;
width: 70px;
background-color: #12A483;
border-color: #9dacc8;
border-style: solid;
border-width: 3px;
border-radius: 15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
text-align: center;
padding-top: 7px;
box-shadow:0px 2px 7px #292929;
-moz-box-shadow: 0px 3px 8px #292929;
-webkit-box-shadow: 0px 3px 8px #292929;
display: inline-block;
margin:0 10px;
}
#espanol-button {
height: 35px;
width: 100px;
background-color: #12A483;
border-color: #9dacc8;
border-style: solid;
border-width: 3px;
border-radius: 15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
text-align: center;
padding-top: 7px;
box-shadow:0px 2px 7px #292929;
-moz-box-shadow: 0px 3px 8px #292929;
-webkit-box-shadow: 0px 3px 8px #292929;
display: inline-block;
margin:0 10px;
}
a.whitelink {
color: white;
}
a.whitelink:hover {
color: #00133e;
text-decoration: none;
}
<div id="head-map">
<div id="map-button"><a class="whitelink" href="#" target="new">Map</a>
</div>
<div id="espanol-button"><a class="whitelink" href="#" target="self">Español</a>
</div>
</div>
You'll need to add a wrapper div around the two buttons as well as a clear div.
http://codepen.io/anon/pen/mJKagE
<div id="head-map">
<div class="wrapper">
<div id="map-button"><a class="whitelink" href="#" target="new">Map</a>
</div>
<div id="espanol-button"><a class="whitelink" href="#" target="self">Español</a>
</div>
<div class="clear"></div>
</div>
</div>
Here's the CSS. Note the .clear class.
#head-map {
clear: none;
float: left;
margin-left: 30%;
width: 100%;
display: block;
margin-right: 1%;
text-align: center;
padding-top: 0px;
background:blue;
}
.wrapper {
width:182px;
margin:0 auto;
}
#map-button {
height: 35px;
width: 70px;
background-color: #12A483;
border-color: #9dacc8;
border-style: solid;
border-width: 3px;
border-radius: 15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
text-align: center;
padding-top: 7px;
box-shadow:0px 2px 7px #292929;
-moz-box-shadow: 0px 3px 8px #292929;
-webkit-box-shadow: 0px 3px 8px #292929;
float:left;
display: inline-block;
margin:0px auto;
}
.clear{clear:both}
#espanol-button {
height: 35px;
width: 100px;
background-color: #12A483;
border-color: #9dacc8;
border-style: solid;
border-width: 3px;
border-radius: 15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
text-align: center;
padding-top: 7px;
box-shadow:0px 2px 7px #292929;
-moz-box-shadow: 0px 3px 8px #292929;
-webkit-box-shadow: 0px 3px 8px #292929;
float:left;
display: inline-block;
margin:0px auto;
}
a.whitelink {
color: white;
}
a.whitelink:hover {
color: #00133e;
text-decoration: none;
}
Of course, flex-box can do this
#head-map {
padding-top: 0px;
display: flex;
justify-content: space-around;
}
#map-button {
height: 35px;
width: 70px;
background-color: #12A483;
border-color: #9dacc8;
border-style: solid;
border-width: 3px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
text-align: center;
padding-top: 7px;
box-shadow: 0px 2px 7px #292929;
-moz-box-shadow: 0px 3px 8px #292929;
-webkit-box-shadow: 0px 3px 8px #292929;
}
#espanol-button {
height: 35px;
width: 100px;
background-color: #12A483;
border-color: #9dacc8;
border-style: solid;
border-width: 3px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
text-align: center;
padding-top: 7px;
box-shadow: 0px 2px 7px #292929;
-moz-box-shadow: 0px 3px 8px #292929;
-webkit-box-shadow: 0px 3px 8px #292929;
}
a.whitelink {
color: white;
}
a.whitelink:hover {
color: #00133e;
text-decoration: none;
}
<div id="head-map">
<div id="map-button"><a class="whitelink" href="#" target="new">Map</a>
</div>
<div id="espanol-button"><a class="whitelink" href="#" target="self">Español</a>
</div>
</div>
The above example spaces the buttons out across the page.
This FIDDLE shows them centered with some slight left/right margin added.
My code: https://jsfiddle.net/k0hqzcwg/
I'm not understanding why the message button is moving outside of the parent div. I've tried clearing floats both with adding clear: both, and adding a clearfix class but have not gotten any results.
In summary, I am trying to start a competing video sharing service with Youtube, my immense skill in CSS and Html are sure to pull through and give me the one up. Sarcasm
Any tips are welcome, I know I have a lot to learn.
For those who dont want to click the link:
Html:
<body>
<div id="headingbarholder">
<div id="headingbar">
<div id="heading-submit-avatarholder">
<div id="headingmessagebutton">
<span id="messagebuttoncontent" style = text-align: middle;>Message</span>
</div>
<div id="headingavatar">
<img id="heading-avatar" src="Removed Link" width = 45px; height = 45px;></img>
</div>
</div>
<img id="logo" src="Remove Link" width = 45px; height = 45px; display = inline-block;></img>
</div>
</div>
</body>
Css:
body {
color: White
font-size: 11px;
font-family: arial,sans-serif;
line-height: 15px;
background-color: #F1F1F1;
margin: 0 -8px 0 -8px;
}
#headingbarholder{
position:fixed;
left:0;
width: 100%;
}
#headingbar{
position: relative;
background-color: #fff;
padding:7px 30px 8px 30px;
border-bottom: 1px solid #E8E8E8;
}
#heading-submit-avatarholder{
float: right;
right: 0px;
width: 160px;
}
#headingmessagebutton {
background-color: #F8F8F8;
color: #333;
font-weight: bold;
font-size: 11px;
height: 28px;
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
border: 1px solid #D3D3D3;
border-radius: 2px;
display:inline-block;
padding: 0px 13px;
box-sizing: border-box;
line-height:normal;
}
#headingavatar{
width: 45px;
height: 45px;
display:inline-block;
}
Float the button left.
Here:
#headingmessagebutton {
background-color: #F8F8F8;
color: #333;
font-weight: bold;
font-size: 11px;
float: left;
height: 28px;
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
border: 1px solid #D3D3D3;
border-radius: 2px;
display: inline-block;
padding: 0px 13px;
box-sizing: border-box;
line-height: normal;
}
I would use a button instead and float it: Fiddle
I tried to look at the code but am unable to determine how this gets placed above the divs. Also, googling "tabs on div", "nested tabs on div" didn't seem to show anything relevant so my terminology is off.
I imagine they used an absolutely positioned <div>.
Demo:
Output:
CSS:
#container {
border: 1px solid lightgrey;
border-radius: 5px;
height: 100px;
position: relative;
width: 200px;
}
.tab {
background-color: rgb( 242, 242, 242 );
border-right: 1px solid lightgrey;
border-bottom: 1px solid lightgrey;
border-radius: 0 0 5px 0;
color: grey;
display: inline-block;
font: 12px Arial;
left: 0;
padding: 5px;
position: absolute;
top: 0;
}
HTML:
<div id="container"><div class="tab">Example</div></div>
Just use this:
CSS
.bs-docs-example {
position: relative;
margin: 15px 5px;
padding: 39px 19px 14px;
*padding-top: 19px;
background-color: #fff;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.bs-docs-example:after {
content: "Condiciones de uso";
position: absolute;
top: -1px;
left: -1px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
background-color: #f5f5f5;
border: 1px solid #ddd;
color: #9da0a4;
-webkit-border-radius: 4px 0 4px 0;
-moz-border-radius: 4px 0 4px 0;
border-radius: 4px 0 4px 0;
}
HTML
<div id="content">
<div class="container">
<div class="bs-docs-example" style="text-align: justify;">
<h2>Header</h2>
<p>Paragraph</p>
</div>
</div>
</div>
DEMO