I have a container div which has text within it that I want centered. I want to also insert a div into the container which floats to the right, like this:
<div id="container" style="text-align:center">
Text
<div id="child" style="float:right"></div>
</div>
Unfortunately what happens is that the text is no longer centered with respect to the container, but is instead shifted to the left by the width of the child.
Does anyone know how to get the text to center whilst keeping the div contained to the right?
Something like this...
<div style='position:relative;'>
my centered text
<div style='position:absolute;right:0;top:0'>
my right div
</div>
</div>
You can obviously throw the inline styles into CSS.
Posibly this?? Creating 3 equal parts. left middle and right??
<div id="container">
<div id="child1" style="float:right width: 30px;"></div>
<div id="child2" style="float:right width: 30px; text-align:center;">TEXT</div>
<div id="child3" style="float:right width: 30px;"></div>
</div>
Related
How do I align two divs such that one is to the extreme left and other is to the immediate right of center.
Note that its not in center. Its just sticked to center . Something like this
div |div
here | represents the center of the page
I tried giving width:50% but on page resize its not giving expected result and all divs are rearranging differently. I tried giving margin-left and right as well but same problem
<div class="help-bar-div">
<hr>
<div style="display:inline-block;">
<div style="display:inline-block;margin-left:0;width:50%; margin-right:0">
text1
</div>
<div style="display:inline-block;float:right; margin-left:-11px;">
text2
</div>
</div>
</div>
you can use display flex on the container and flex-grow to fill equal spaces
<div style="display:flex;">
<div style="flex-grow: 1;">
text1
</div>
<div style="flex-grow: 1;">
text2
</div>
</div>
I'm trying to set some divs to width: 100% on Twitter Bootstrap 3 (including no paddings or margins).
JSfiddle: http://jsfiddle.net/rq9ycjcx/
HTML:
<div class="container">
<header>
<div class="row">
<div class="col-md-2">
<img src="http://placehold.it/150x50">
</div>
<div class="col-md-10">Menu</div>
</div>
<div class="row gray">
<div class="col-md-6">
<h1>Page Title</h1>
</div>
<div class="col-md-6">
<div class="breadcrumbs">Main page > page </div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/350x150" />
</div>
</div>
</header>
<footer>
<div class="row">
<div class="col-md-12">Content</div>
</div>
<div class="row dark">
<div class="col-md-3">Footer 1</div>
<div class="col-md-3">Footer 2</div>
<div class="col-md-3">Footer 3</div>
<div class="col-md-3">Footer 4</div>
</div>
</footer>
</div>
What is the right way to get image http://placehold.it/350x150 width: 100%, including no paddings or margins?
Page title and breadcrumbs height is 80px.
If I resize window to smaller screen (e.g. mobile), text Main page > page disappears (it's somewhere but not on own row).
How to fix it?
Use <div class="container-fluid">. As per Bootstrap Docs: Use .container-fluid for a full width container, spanning the entire width of your viewport.
There is 0 padding on container-fluid.
In your code you have what appears to be body content in your header and you also have a div class="container" outside of your header and footer. This is not correct, you should have your container/container-fluid inside of your body. Also for your header you should use <nav="nav navbar-nav">.
Updated Fiddle
As suggested above, you can create a helper class
.padding-0 {
padding: 0;
}
and apply it to any HTML elements for which you need a padding reset. So in your case, it would look like this:
<div class="row">
<div class="col-md-12 padding-0">
<img src="http://placehold.it/350x150" />
</div>
</div>
For the second problem, set height of .gray class to auto :
#media () {
.gray {
height: auto;
}
}
Note: You could also remove line-height: 80px, it's optional :)
http://jsfiddle.net/rq9ycjcx/8/
There is no "right" way to do that in Bootstrap 3. It means you have to reset padding for the exact column.
You can create a class such as this one:
.col-md-12.resetPadding { padding:0px }
About Main page > page disappearing, I don't see this problem on my browsers (tested on Chrome and FF), but you have line-height: 80px there and as you said your breadcrumbs div has height: 80px;, so try to reduce line-height property and see how it works.
A simple way would be to remove the <div class="col-md-12">...</div> and add your content directly inside the row tag. The row tag removes the left & right gutters, whereas the cold-md-12 essentially adds the gutters back in.
The Bootstrap 3 documentation says that for single full width items you don't need any markup, eg just wrap it in <p> tags. However this will show the 15px gutters due to the page markup. So by simply adding in the row tag and placing your content directly inside this you will get 100% width content and be compliant with the BS3 documentation.
This is the code:
http://jsfiddle.net/noamway/r8vMp/8/
<div id="website" style="width:100%;">
<div id="layoutAll" style="width:200px;margin:0 auto">
<div id="layout" style="width:100%;position:relative;">
<div id="full_strip" style="width:100%;background-color:black;color:white;height:100px;position:absolute;left:0;">
Hello world
</div>
</div>
</div>
</div>
And I like that "full_strip" will be 100% from all the page width.
Because of the relative of is parent I can't do that.
I can't remove any setting from the is parents so I need a commend or something else on him that will tell him to ignore is relative parent.
Thanks,
Noam
Remove width:200px for div with id #layout. Important thing is dont use same id for two elements. Duplicate id's are dangerous.
CODE:
<div id="website" style="width:100%;">
<div id="layout" style="margin:0 auto">
<div id="layout" style="width:100%;position:relative;">
<div id="full_strip" style="width:100%;background-color:black;color:white;height:100px;position:absolute;left:0;">
Hello world
</div>
</div>
</div>
</div>
DEMO FIDDLE
You basically ask for relating an absolute position Div which is dynamically generated inside a relative position Div to the body instead of to its relative parent Div.
Position relative and absolute are always related to the first root parent element that has a absolute or relative position. This why it is impossible to do what you ask for.
The only solution for you its to place the “full_strip” Div outside of its position relative parent element and into body tag.
To build on Unknown's answer, if you want the text to remain centered you can add text-align: center; to the deepest nested div.
The Code:
<div id="website" style="width:100%;">
<div id="layoutAll" style="margin:0 auto">
<div id="layout" style="width:100%;position:relative;">
<div id="full_strip" style="width:100%;background-
color:black;color:white;height:100px;position:absolute;left:0; text-align:
center;">
Hello world
</div>
</div>
</div>
</div>
JSfiddle
Hello I'm trying to create a navigation bar which is made up of several div containers in one big navigation div.
I'm not sure if my approach is right but I tried to do it like this:
<div id="navigation">
<div class="innen">
<div class="logo">
<img class= "logo" src="logo.png" title="Logo"/>
</div>
<div id="bar">
<!-- Navigation Items are in here --!>
</div>
<div id="gamecard">
<!-- Another right floated Element !-->
</div>
</div>
<div class="unten">
<p>You are here: Main</p>
</div>
</div>
I wanted to push down the bar div to meet the height of the image by using top padding:
#bar{
padding-top: 80px;
}
But now it moves the down gamecard container too. How can I prevent this from happening?
I also added a jfiddle:
http://jsfiddle.net/Cv4p2/
try using position:absolute
<div id="bar" style="position:absolute; padding: 80px 0 0 0">
</div>
Padding is intended to add a cushion inside the container in which you implement it. It appears that you would benefit from using margin. You should replace "padding-top: 80px;" with "margin-top: 80px;" and you would achieve the desired effect.
How can I get the content div to get at the bottom instead of that odd position?
http://jsfiddle.net/madprops/6FFXL/1/
<div>
<div style='float:left'>name </div>
<div style='float:left'>date </div>
<div style='float:left'>comments </div>
</div>
<div id="contenido" style="font-size:20px;">content</div>
EDIT: removed float:top
It is at the bottom for me in your example, (FF5), but you should probably make it safe by setting content to clear your floated divs, like this:
<div id="contenido" style="font-size:20px;clear:both;">content</div>
Also, the float:top on your first div is invalid, there is no top property of float.