I have a problem where if I write divs like this:
<div class="asdf">
Some content..
</div>
<div class="asdf2">
Some content
</div>
Then the two divs render with a space in between. If I write it has such:
<div class="asdf">
Some content..
</div> <div class="asdf2">
Some content
</div>
Then a space appears between the divs... BUT i I write it as such:
<div class="asdf">
Some content..
</div><div class="asdf2">
Some content
</div>
Then no space appears between the divs. How is it that this is the case? How can I fix this?
In short, HTML renders white space. I assume that you're rendering these div's inline? The solution you gave is, simply put, the solution.
Related
I am looking to have all the elements in my div (which is a bootstrap column actually) while keeping the text in there left-align.
So my code looks like this :
I want the p, span and a to be horizontally centered, while their content (the texts) should be left-align.
<div class='col-sm-4 col-md-4'>
<p>...</p>
<span>...</span>
<a>...</a>
</div>
(the number of columns varies, I have 3 here, but that could be more really).
What I tried to do in my css was to add some left-padding in percentages according to the number of columns. It does work quite well, but I am sure there is an easier way to achieve this.
by the way, dont forget to add "class=" ;).
If i understood you right, there are two possibilities.
first:
<div class="col-md-12">
<div class="col-md-4 .col-md-offset-4">
<p>...</p>
<span>...</span>
<a>...</a>
</div>
</div>
This would create an offset of "col-md-4". Thus, 4 - 4 - 4, it would be centered.
Another, neater solution would be:
<div class="col-md-12">
<div class="wrapper" style="width:300px;position:relative;margin-left:auto;margin-right:auto;">
<p>...</p>
<span>...</span>
<a>...</a>
</div>
</div>
That way you create a wrapper that is centered through setting the margins left and right automatically.
For that solution you need to provide the position(relative etc, but not static) and the width!
hope it helps.
I've boiled my layout down to this fiddle or the full screen version
I am having two problems. The first, is that space between the side bar and the content is very large. I want them to be spaced as normal. In my case, I'm expecting the side bar to be span2 in size, my main content to be span7 in size and then a right hand column to be span3.
<div class="row-fluid">
<div class="span2">
<div class="well sidebar-nav-fixed">
<ul class="nav nav-list">
<li class="nav-header">Sidebar</li>
...other links ...
</ul>
</div>
</div>
<div class="span7 span-fixed-sidebar">
<div id="world-map" style="display:block;"> </div>
</div>
<div class="span3">
<div class="row-fluid">
<div class="span12" id="country-info">
<h2 id="country-info-header">
The Detail Header
</h2>
<p id="country-info-summary">
A set of summary information. A short paragraph of text.
</p>
</div>
</div>
</div>
However, I'm getting a result with a huge gap between my sidebar and my content (the red box), and the right hand content is on the left hand side and under my sidebar. How can I fix this layout?
You need to experiment with Bootstraps offset classes. I made you a quick example here:
http://jsfiddle.net/tXzjX/5/
Your position:fixed takes the element out of the natural flow of the page, and in a way "resets" the columns on the grid. Using Bootstrap's offset classes can counteract that issue. Check here: http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem under "Offsetting Columns".
Could you not just reduce the margin size like so:
.row-fluid > .span-fixed-sidebar {
margin-left: 100px;
}
as that seems to move the red bar in nicely
EDIT: I have had a play about and come up with a slightly simpler looking code with what I think is the effect you require with a bit of tweaking. http://jsfiddle.net/bmgh1985/UeFRa/
Basically I'm trying to create a simple webpage template which would contain 3 rows. The first being the header which contains two columns, the second just being the mainbody and then the last being a footer.
Coding wise i'm doing this kind of layout
<div id="wrapper">
<div id="header">
<header>
</header>
<div id="col2>
</div>
</div>
<div="mainbody"></div>
<footer></footer>
Basically the trouble I'm having now is in regards to the first row with the two columns. Basically I have a picture in the first one and a bunch of buttons on the second one. Ideally what I would like is to have the header at 100% width so it fits the screen and the contents of the first column stick to the left and the buttons to the right. With the blank space left inbetween the two. So the contents stick to the sides so to speak.
At the moment I'm using float:left on CSS for the first column, I've been messing around with float/align/position but I can't seem to get anything to work.
So any advice on that I would appreciate it.
I also had another question in regards to the footer, basically I have no idea how to even go about doing it. So just asking if possible and guidance where to look.
So for the footer I was wondering if it would be possible for it, if in between the footer and the browser x-axis there's white space it fits to the screen and the body would strech. Because as of now my body is only at the height of the contents within. So basically general advice on CSS to help implement the style so it fits to the screen.
Header with 2 columns
<div id="header">
<div id="column1" style="float:left;">Image</div>
<div id="column2" style="float:left;">Buttons</div>
</div>
Now add desired margin-left to second column div. It will create space in between 2 columns
<div id="wrapper">
<header>
<div id="column1" style="float:left;">Image</div>
<div id="column2" style="float:left;">Buttons</div>
</header>
<div class="mainbody">
Content
</div>
<footer></footer>
Use this
It is simple structure that can be created as follows (Here is DEMO)
HTML is
<div id="wrapper">
<div id="header">
<header><img src='http://www.topnews.in/files/facebook-yahoo.jpeg' height=200 />
</header>
<div id="col2"><input type=Button value ="button 1" /><br><input type=Button value ="button 1" /><br><input type=Button value ="button 1" /><br>
</div>
</div>
<div="mainbody">mainbody
</div>
<footer></footer>
</div>
And CSS will be
#header{overflow:auto}
header{float:left}
#col2{float:right}
Hope it will help you :)
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.
I am making a WYSIWYG webpage editor: http://brokenmyriad.com/editor2.php, however I have come across a problem when trying to add image functionality.
Note: the image is not inside a contenteditable element, but is just a normal floated image.
The problem can be recreated by clicking into either the paragraph or the heading and the clicking the insert image button on the toolar (the far right button). (on the above linked page).
In standards based browsers it works as expected, and the heading and the paragraph are both to the right of the image, however in ie6 the paragraph is under the floated image like in this picture: http://tinypic.com/view.php?pic=2mfcfo8&s=3
My simplified code structure is as follows:
<div>
<img style='float:left'>
<h1>Click here to edit!</h1>
</div>
<div>
<p>Click here to edit!</p>
</div>
What I want is for the <p> element to be alongside the floated image, and under the <h1> element as it is in standards based browsers.
Any help would be greatly appreciated!
Why is the paragraph in a separate div? Wouldn't the following work:
<div>
<img style='float:left'>
<h1>Click here to edit!</h1>
<p>Click here to edit!</p>
</div>
If you must have the divs, then the second one needs to be nested
<div style="float: left;">
<img style='float:left'>
<h1>Click here to edit!</h1>
<div style="float: left;">
<p>Click here to edit!</p>
</div>
</div>
Your second div should be floated left:
<div>
<img style='float:left'>
<h1>Click here to edit!</h1>
</div>
<div style="float:left;">
<p>Click here to edit!</p>
</div>
It turned out that the elements had width:100% on them, which was causing the error.