Basically what i want to do is this:
http://jsfiddle.net/wQBq5/20/
without using tables.
Here is an attempt:
http://jsfiddle.net/vaDCQ/
This fiddle shows the basics: http://jsfiddle.net/cA3su/. But there are differences. For one thing, the "inner" divs don't stretch all the way to the right like the table does. For another, you need to understand how floats and clears work. It takes some practice and experimentation. In short, divs will never work exactly the way tables do. But once you know how to do it, divs get you free of a lot of the headaches that tables create.
You can achieve this using float.
You can use something like this (basic example):
html:
<div class="left-container">1</div>
<div class="right-container">
<div class="number2">2</div>
<div class="number3">3</div>
</div>
css:
.left-container{float:left;width:100px;}
.right-container{float:left;width:100px;}
.right-container .number2{float:left;width:100%;}
.right-container .number3{float:left;width:100%;}
Here is my example.. http://jsfiddle.net/wQBq5/37/
Related
How can I set the tables side by side? I'm a bloody rookie, I know there are more elegant ways to do my code, I'd appreciate your input, i posted my code on pastebin since I had a werid error here
My HTML code: https://pastebin.com/gq73n05Q enter code here
This is how my Website looks like & below how I want it to be: https://imgur.com/a/Fa5No00
So, in my view, best way to get two tables side by side is to put them into divs.
You'd add a div before your first table (line 32 in your pastebin) that looks like such:
<div class="column">
<!---your left hand table goes in here --->
</div>
Then you do exactly the same for your second table (new div at line 59, same class as above).
<div class="column">
<!---your right hand table goes in here --->
</div>
Then you add some style rules to govern your two new divs. I'd hugely recommend doing this in a section at the top of your page somewhere.
<style>
.column {
display:inline-block;
width:50%;
float:left;
}
</style>
If you wanted to inline those styles, then each div would start like this:
<div style="display:inline-block;width:50%;float:left;">
That will make the columns appear side by side as you want.
You should note, you are going to run into other troubles though. You've hard-coded in a lot of "width" rules in the tables and table cells which will impact the responsiveness of your page and, in general, unless you're doing an html email, you'd really want to steer clear of tables for layout purposes.
If you'd like to see a best-practice implementation of it anyway, there's this one on w3schools.com: https://www.w3schools.com/howto/howto_css_table_side_by_side.asp it has quite an elegant look which might prove useful.
Good luck with it!
I'd like to ask can this code be correct from Bootstrap point of view? I expect the answer is yes. The question is about additional tag in between row and col(s).
<div class="row">
<something>
<div class="col-sm-6">
a
</div>
<div class="col-sm-6">
b
</div>
</something>
</div>
P.S. <something> has no css styles and that's a directive from AngularJS.
There is nothing wrong here, but there are better practices on using bootstrap.
Just take care of minus margins and clearfix, check if the style flow its ok.
By the way, you can use "comment directive" if u need to use that something tag just for angularJs directive.
From the Bootstrap docs..
Content should be placed within columns, and only columns may be
immediate children of rows.
The Bootstrap row has a negative margin to compensate for column padding. <something> doesn't specifically cause a problem in your example, but it's incorrect from a Bootstrap standpoint.
In that code, the something tag will simply be given the entire 12 column width of the row div. The internal elements will then be split into the relevant grids as long as there is nothing on the something tag which would interfere.
I think this should work fine, but as a sidenote I would normally write this as
<something>
<div class="row">
<div class="col-sm-6">
a
</div>
<div class="col-sm-6">
b
</div>
</div>
</something>
That way then gives you the option to add more rows etc into the something section easily if needed, and just aids readability in my humble opinion.
In this case row basically has the same purpose as col-md-12, but row will give you a margin of -15px to both left and right. To avoid a horizontal scroll-bar you can wrap the whole thing in a div with the class container.
looks good to me but i think according to your "something" element it can vary
I'm wondering if anybody knows the meaning of this tag I found in a valid html file I've downloaded.
<div style="clear: both;"> </div>
Thanks for help in advance.
It clears the floats from both left and right in order to bring the content after it back into the main flow of the page.
Official definition.
The technique is known as a "spacer div" - the article is now ten years old and at the time this was a good solution to a common problem. It typically appears in scenarios like this:
<div class="container">
<div style="float:left">
...
<div style="float:left">
...
</div>
<div style="clear:both"> </div>
</div>
The inner divs are floated - if you simply left out the "spacer div" the container element would not completely enclose its contents (unless you float it itself, which is often impractical). The is needed in some older browsers (you know which one) to ensure it behaves as expected in all situations, i.e. a simple <div style="clear:both"/> didn't always work - you really needed a div with actual (though invisible and nonsensical) content to make it work everywhere.
It's a working solution to a common problem, but there are more elegant ways to solve this, e.g. using the :after CSS pseudo class. This is more elegant because it doesn't require us adding semantically worthless markup elements that are just there for styling purposes. Another great article with a different solution.
This tag will not allow any float to be place either left or right of this tag.
please refer to the picture to get a better visual idea.
I do not have access to Table element because the free edition of the framework I am using "ZK framework" does not have tables but it has DIV .
so think of a Table with some rows and three columns: I used a DIV tag with Left Margin and drew the elements of my left column..
<div id="leftColumn" width= "45%" align="left" style = "margin-top:10px;margin-bottom:10px;margin-right:30px;margin-left:20px;">
I am thinking of using the second column of this table for the spacing between elements on each row and using the third column to put my right hand side elements on it...
so now for the other two DIVs how should I set its properties to look correct?
and actually do you have any better design thoughts?
Thank you.
.divsYouNeedToColumn { display: inline }
in your css should solve your problems.
By the way, the framework restricting tables seems very... stupid.
i'm having this problem........
<div id="Div_DefaultPage">
<div id="Div_inner1">
</div>
<div id="Div_inner2">
</div>
</div>
what i want to do is, i have a combobox which have 2 choice - inner1, inner2.
if user select inner2, inner1 will hidden and inner2 will display on the top of Div_DefaulPage.
The easiest way to do this is to use Javascript to show and hide divs. Here is a tutorial of how you'd accomplish that.
Try your hardest to follow the examples. If you have a problem trying it then post your code and we'll try to help you out. Good luck!