I have a problem with floating buttons inside my div. As soon as I set the float property on button, it not only moves left/right, but slightly changes position and moves up which is not what I want...
Here is what I'm working on
http://jsfiddle.net/o1u1cLbm/2/
<div id='wrapper' style='display:flex; height:88px;align-items:center;text-align: center;background-color:yellow'>
<div style="background-color:blue">
<h1>
Some header text
</h1>
</div>
<div style='flex:1;background-color:red'>
<div style='display:block; vertical-align:middle'>
<button style="height:24px;">
Some stuff
</button>
<button style="height:40px">
Other stuff
</button>
</div>
</div>
The buttons must be in a container that will grow to max space after the title text. Now I want the first smaller button to be close to the title, and the big one on the right side like this
http://jsfiddle.net/o1u1cLbm/3/
<div id='wrapper' style='display:flex; height:88px;align-items:center;text-align: center;background-color:yellow'>
<div style="background-color:blue">
<h1>
Some header text
</h1>
</div>
<div style='flex:1;background-color:red'>
<div style='display:block; vertical-align:middle'>
<button style="height:24px;float:left">
Some stuff
</button>
<button style="height:40px;float:right">
Other stuff
</button>
</div>
</div>
</div>
As you can see after I add float property to the button it is not centered in the parent div anymore but attached to top.
How can I float the buttons without changing their vertical position with just css?
Instead of inline-block just make your div a flex container:
display: flex;
align-items: center;
justify-content: space-between;
justify-content: space-between get you the effect of floating - see demo below:
<div id='wrapper' style='display:flex; height:88px;align-items:center;text-align: center;background-color:yellow'>
<div style="background-color:blue">
<h1>
Some header text
</h1>
</div>
<div style='flex:1;background-color:red'>
<div style='display: flex;
align-items: center;
justify-content: space-between;'>
<button style="height:24px;">
Some stuff
</button>
<button style="height:40px">
Other stuff
</button>
</div>
</div>
</div>
There is no need for floats, you can use flexbox and then use margin-left:auto to last flex-item
<div id='wrapper' style='display:flex; height:88px;align-items:center;text-align: center;background-color:yellow'>
<div style="background-color:blue">
<h1>
Some header text
</h1>
</div>
<div style='flex:1;background-color:red'>
<div style='display:flex;align-items:center;'>
<button style="height:24px;">
Some stuff
</button>
<button style="height:40px;margin-left:auto;">
Other stuff
</button>
</div>
</div>
</div>
Or you can use justify-content: space-between; to flex-container
<div id='wrapper' style='display:flex; height:88px;align-items:center;text-align: center;background-color:yellow'>
<div style="background-color:blue">
<h1>
Some header text
</h1>
</div>
<div style='flex:1;background-color:red'>
<div style='display: flex;width: 100%;justify-content: space-between;align-items: center;'>
<button style="height:24px;">
Some stuff
</button>
<button style="height:40px;margin-left:auto;">
Other stuff
</button>
</div>
</div>
</div>
If you use display: flax; don't need use floating in the flax there are native solutions here you can find solution in JS Fiddle
<div id='wrapper' style='display:flex; height:88px;align-items:center;text-align: center;background-color:yellow'>
<div style="background-color:blue">
<h1>
Some header text
</h1>
</div>
<div style='flex:1;background-color:red'>
<div style='display: flex; align-items: center; justify-content: space-between;'>
<button style="height:24px;">
Some stuff
</button>
<button style="height:40px;">
Other stuff
</button>
</div>
</div>
</div>
Related
I need a vertical divider and the text to line up exactly like this on the top right hand corner of my screen.
I am having some trouble even getting the divider to show and the text to pull right
<div class="row">
<div class="float-right">
<span>Profile & Settings</span>
</div>
<div class="float-right sep">
<div class="septText"></div>
</div>
<div class="float-right">
<span>Logout</span>
</div>
</div>
Css
.sep {
display: flex;
flex-direction: column;
justify-content: center;
}
.sepText {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1;
}
.sepText::before,
.sepText::after {
content: '';
flex: 1;
width: 1px;
background: currentColor;
/* matches font color */
margin: .25em;
}
I can see that bootstrap 4 tag is added to your question. If you are using bootstrap 4, there is a in-built flex utility https://getbootstrap.com/docs/4.0/utilities/flex/
<div class="d-flex flex-row justify-content-end">
<div class="">
<span>Profile & Settings</span>
</div>
<div class="mx-2">|</div>
<div class="">
<span>Logout</span>
</div>
</div>
JS Fiddle: https://jsfiddle.net/8p27xwcs/
use "container" instead of "row", or set display:inline or block on the row div.
<div class="row" style="display:inline;" >
<div class="float-right">
<span>Profile & Settings</span>
</div>
<div class="float-right sep">
<div class="septText"></div>
</div>
<div class="float-right">
<span>Logout</span>
</div>
</div>
or
<div class="container">
<div class="float-right">
<span>Profile & Settings</span>
</div>
<div class="float-right sep">
<div class="septText"></div>
</div>
<div class="float-right">
<span>Logout</span>
</div>
I am trying to vertically center my header elements, but the following code that I've tried isnt working. What am I doing wrong? Please let me know where I can add padding or something else.
Here is the website: https://eagleroofingcontractor.com/
What I have so far:
<div class="col-md-12">
<aside id="text-3" class="widget header-right widget_text">
<div class="textwidget">
<div class="container extra-info">
<div class="row">
<div class="col-md-4">
<i class="fa fa-phone"></i>
<div class="phone">
<h3>631-209-7377</h3>
<span>info#eagleroofingcontractor.com</span>
</div>
</div>
<div class="col-md-2">
<div>
<img src="https://eagleroofingcontractor.com/wp-content/uploads/2019/02/Better-Business-Bureau-A-Logo.png">
</div>
</div>
<div class="col-md-2">
<div>
<img src="https://eagleroofingcontractor.com/wp-content/uploads/2019/02/gaf-master-elite-gold800px-800x292.jpg">
</div>
</div>
<div class="col-md-2">
<div>
<img src="https://eagleroofingcontractor.com/wp-content/uploads/2019/02/Google_Partners_logo_blogpage.jpg">
</div>
</div>
<div class="col-md-2">
<div>
<img src="https://eagleroofingcontractor.com/wp-content/uploads/2019/02/googole-guaranteed-min.png">
</div>
</div>
</div>
</div>
</div>
</aside>
</div>
You need to change the elements .textwidget, .extra-info and the col-md-2 columns inside .extra-info to flex items and then vertically center the columns using the css flex property align-items:center.
Add the following to your CSS:
.textwidget {
display: flex;
}
.extra-info {
display: flex;
}
.extra-info .col-md-2 {
display: flex;
align-items: center;
}
N.B. Your site has a lot of elements using a common ID (e.g. all your <aside> elements in your header uses the same #text-3 ID).
You should not use the same ID for more than one elements. Replace them with a common class-name or use a different ID for each element instead.
I'm working on making front end design for someone but I don't have access to the css file or classes, so I can't see what's causing the container align left.
I'm looking to center the container on screen. What would be best approach? I tried wrapping div with text-align: center !important; that didn't work.
<div class="portlet-content">
<div class="portlet-content-container">
<div class="portlet-body">
<div>
<div class="container">
<div class="biography-view">
<div class="biography-item col-md-6">
<div style="border-style:none">
<div class="biographyimage" style="background-image:url(http://www.math.uni-frankfurt.de/~person/_4170854.jpg);"> </div>
<div class="caption biography-profile">
<div class="biography-profile-content">
<h3 class="full-name">Name</h3>
<p class="person-title">Company Name</p>
<p class="person-title"><strong>Person Title</strong></p>
<div class="person-biography">Biography</div>
<div class="person-biography collapse" id="readmore">More Person Info</div>
<a class="read_more" data-target="#readmore" data-toggle="collapse">Read More</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
In a CSS block for the container, you can center it as follows:
margin-left: auto;
margin-right: auto;
Use inline styles <div class="portlet-content" style="text-align:center;"> or somthing yours based on css specificity mozila MDN
enter image description here
I have an issue with thumbnail size. In the picture, there should have been another picture in white area in the left-middle, but the space is skipped because an image above has a long title. Everytime a picture with a long title is showed up, the size becomes larger. Is there any way I can fix thumbnail size even though the title gets longer?
Here is my HTML code and CSS i don't write anything.
<div class="panel-body">
<div id="recipeResults" class="row">
<!-- templates/BasicImages/imageTemplates.js -->
</div>
</div>
Here is actual code. Sorry :)
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<div class="hovereffect">
<img class="img-responsive center-block" src="{{json.url}}" alt="{{json.alt_name}}">
<div class="overlay">
<h3> {{json.hoverDescription}}</h3>
<a class="info" href="#"><i class="fa fa-clock-o fa-fw" aria-hidden="true"></i>{{json.cookTime}}</a>
</div>
</div>
<div class="caption">
<p style="font-size: 1pt;"> </p>
<h4>{{json.name}}</h4>
<p>{{json.description}}</p>
<p><button type="button" class="btn btn-default btn-sm" aria-label="Left Align">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Save
</button></p>
</div>
</div>
</div>
You can use this code for the box tag (or title tag) in CSS to prevent any over sizing
.class-name{
overflow: hidden;
}
CSS overflow Property
Using Flex you can align children of different height vertically without leaving gaps.
<div id="outer-wrap">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
And the CSS
div#outer-wrap {
display: -ms-flexbox;
-ms-flex-direction: column;
-ms-flex-wrap: wrap;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100 vw;
}
div#outer-wrap .child {
width: 33.3%;
}
I created a panel heading in bootstrap and tried to center its text while having a button that's supposedly on the same horizontal axis as the text but pulled in the right but my output was:
The button wasn't horizontally aligned with the text
The text is centered between the left of the heading and the left of the button instead of being centered between the left and right side of the heading
Here's my code:
<div class='container'>
<div class='panel panel-default'>
<div class='panel-heading'>
<div class='panel-heading text-center'>
<h4>Present Schedule<button class='btn pull-right btn-danger' onclick="location.href='past_sched.php'">Go to Past Schedule</button></h4>
</div>
</div>
</div>
</div>
Here's a jsfiddle of the result: https://jsfiddle.net/63c0wn66/3/
Try this code. Put button outside h4
HTML
<div class='container'>
<div class='panel panel-default'>
<div class='panel-heading text-center panel-relative'>
<button class='btn btn-danger btn-right' onclick="location.href='past_sched.php'">Go to Past Schedule</button>
<h4>Present Schedule</h4>
</div>
</div>
</div>
CSS
.panel-relative{
position: relative;
}
.btn-right{
position: absolute;
right: 15px;
}
https://jsfiddle.net/63c0wn66/7/
1) Put your button outside h4
2) Apply for h4 property display: inline-block
<div class='container'>
<div class='panel panel-default'>
<div class='panel-heading text-center'>
<h4 class="myClass">Present Schedule</h4>
<button class='btn pull-right btn-danger' onclick="location.href='past_sched.php'">Go to Past Schedule</button>
</div>
</div>
</div>
.myClass {
display: inline-block;
}
JSFiddle