I have a "header" which is class .row and two columns with classes .col-md-2 and .col-md-10. In the first column there is the logo and in the second the page-heading.
I created a fiddle for you: http://www.bootply.com/TXG3QC7TNo
How can I overlap two columns so that the heading is really centered not only in the column? I tried it with positions (header - relative and columns - absolute) but it breaks the responsiveness!
U can do it in one <div>:
<div class="container">
<div class="row">
<div class="col-md-12"><img src="http://placehold.it/100x100" alt="Logo"><h1 class="text-center">Test</h1></div>
</div>
</div>
AND give ur
img{position:absolute;}
so you won't loose ur responsibility
The h1 tag is a block-level element, try adding 'display:inline-block' to it.
Related
Let's say I have this structure:
<div className="row">
<div class="col-sm">
<div>TEST</div>
</div>
<div class="col-sm">
<div>TEST<br>TEST<br>TEST</div>
</div>
</div>
Basically, I know how to make the columns of the same height (using the .equal class on the row) however, what I need is the child div of the column to also be of the same height. Currently, if one of the child divs is shorter, it won't look aligned because I set the background color to be in the child div and not on the col-sm div.
I cannot set the background on col-sm for flexibility reasons. E.g. I may need to use that child div component in another section that doesn't use 'col-sm'.
Mine currently is the one on top, I want it to become the one at the bottom:
A situation like this, for me, would be time to turn to jQuery or a plugin such as MatchHeight.
matchHeight makes the height of all selected elements exactly equal.
I have 2 divs I want to exactly overlap horizontally using negative margin-left.
HTML:
<div id=one></div>
<div id=two></div>
CSS:
body{margin:0px;padding:0px,border:0px}
#one {width:100px;height:100px;background-color:red;}
#two {width:100px;height: 50px;background-color:blue;}
#one,#two{display:inline-block;}
#two{margin-left:-100px;}
Before negative margin each div is 100px wide:
After negative margin the divs are 4px from overlapping exactly:
Why does setting a negative margin on the second div not cause it to exactly overlap the first div?
BTW, I'm just experimenting with margin-left...I know I can absolutely position the 2 divs inside a relative wrapper.
Thanks in advance for any enlightenment!
Inline elements are sensitive to their structure in your HTML. Since both divs are separated by a line break, they have a small "margin" between them like letters in a sentence would (which is pretty much the point of inline elements).
<div id=one></div> <!-- Here -->
<div id=two></div>
Change the structure of your HTML to remove this space:
<div id=one></div><div id=two></div>
Or you can use comments to negate the line break:
<div id=one></div><!--
--><div id=two></div>
Inline block has weird "bug" you could call it, that applies a 4px space between elements assuming a default font-size. This is created from the line-break between your div's. You'll find that you can fix this quite simply by making your negative higher.
margin-left: -104px;
This will fix your issue, but it's also not the only way to fix it.
You could do this... Instead of:
<div id=one></div>
<div id=two></div>
Delete the line-break between the div's so they are this:
<div id=one></div><div id=two></div>
This will also fix the issue.
You could alternatively set the font-size of their containing element to 0.
HTML:
<div class="container">
<div id=one></div>
<div id=two></div>
</div>
CSS:
.container { font-size: 0; }
But wait! There is more. You could comment out the line-break.
<div id=one></div><!--
--><div id=two></div>
You could drop the ending > to the beginning of the next element.
<div id=one></div
><div id=two></div>
So i have this problem with divs. I have one div containting two other divs that are next to eachother, problem is that in the right div I have bunch of text and i want that text to start a new row when it goes to div #1 (his parents) max width.
Here's my HTML
<div id="parent">
<div id ="left"></div>
<div id ="right">
blahblablabla
</div>
</div>
Use the property word-wrap:break-word; in your CSS for <div id ="right">. You may also need to set overflow-x: hidden;.
maybe you want to put <div id="left"> inside <div id="right"> and just make the right div width = 100%?
Simple question I want to divide a div in to two columns I am using to divs with
http://jsfiddle.net/petran/WnKW3/
display:inline-block
and it works fine , when I add widths with sum of 100% the second column appears
underneath seems that it doesn't feet on the parent window, if the widths sums
up to 99% is working my question is if that should always be the sum of columns ?
That is because of the gap between the two child div elements in HTML code. you need to remove the gap between the two div's to which you are giving display: inline-block. Just remove it. It will work fine.
<div class="container">
<div class="col1">
col1
</div><div class="col2"> <!-- removed whitespace -->
col2
</div>
</div>
Working Fiddle
For more information go through this link
There are many other ways to fix this. which you can find here
The white space between your divs take up space so your total width is greater than 100% thats why it wraps. Remove the space and you'll see
<div class="col1">
col1
</div><div class="col2">
col2
</div>
http://jsfiddle.net/WnKW3/1/
I need some help positioning two nav elements (2 and 3) in a subheader (1). Please, refer to the mockup.
I am really only concerned with positioning here. I want to position the daysNav (2) on the left, and opposite it, the paginationNav (3) on the right. It would also be cool if I didn't have to define a fixed height for the subheader both elements are in; instead, it'd expand and collapse automatically based on the largest height size of either element.
Thanks!
#subhead {overflow:hidden;}
.days-nav {float:left;}
.pagination-nav {float:right;}
<div id="subhead">
<div class="days-nav">
....
</div>
<div class="pagination-nav">
....
</div>
</div>