css - How to create a 4-columned, liquid footer? -


The content of the website is fine-tuned and the left and the minimum width and the left fluid I think is below But now I'm having trouble creating a liquid, 4-columnged footer to go downstairs. The way I have it, columns move like a ladder.

In order to line it correctly with the same amount of space between the window spreading, all of them need the columns themselves to be of different width.

Edit

I realized that the mistakes I made, the columns had to take action, so now I can move forward to learn about space. Equally in the footer. I have CSS: 

  #footer .col1, #footer .col2, #footer .col3, #footer .col4 {float: left; Padding: 10 px 0; } #footer .col1 {width: 75px; } #footer .col2 {width: 375px; } #footer .col3 {width: 325px; } #footer .col4 {width: 100px; }

I used to get breadth in the form of percentage, but it did not even get the place as I thought it would be. Thanks for all your help!

The following will do the following for you:

HTML 

  & lt; Div id = "footer" & gt; & Lt; Div class = "column" & gt; & Lt; Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "column" & gt; & Lt; Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "column" & gt; & Lt; Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "column" & gt; & Lt; Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;

CSS 

  #footer .column {float: left; Width: 25%; Background: Red; } #footer .column div {margin: 10px; Height: 100 pixels; Background: blue; }

and

I nested & lt; Div & gt; Using the structure to show how you can get a liquid column with a certain distance between When the dimension of% and fixed width is used, you can not apply the same element if you want to make sure about width in a live site, instead of making nested devil structure, fixed in nested elements Will make more sense to implement horizontal margins.

Your column is likely to go down because they are very broad, to fit together in the same horizontal line, you will see in my example that the width of the 4 outer divas increases to 100%. Something else (called margin / padding is added) will cause the drop you see.


-

Comments

Post a Comment

Popular posts from this blog

Eclipse CDT variable colors in editor -

I hope this is a good question to ask here. This programming is related, so I thought it would be better than the superuser, so I am using the CDT C ++ Eclipse plugin. I know how the editor changes colors for some things But is there a way to do that all the variables are different colors? For example in KDEValue, it sets the local variables and square variables in different colors and bold square squares. Can I copy it to CDT? Eclips provides some level of color customization for text editor syntax You can see it on the following: There are many elements, including the Window> Preferences> C / C ++> Editor> Syntax color code that can be changed, assembly, Comments, Preprocessor and Doxian Under the code, it is possible to change the color of some variable types, such as global variables, local variable announcements, local variable references, and parameter variables. But I do not think the code is capable of changing the color of each variable declared....
Read more

AJAX doesn't send POST query -

$ (दस्तावेज़) .ready (function () {function ajaxselectrss (rssurlvar) {var ajaxRequest; // वेरिएबल जो अजाक्स को संभव बनाता है! कोशिश करें कि {// ओपेरा 8.0+, फ़ायरफ़ॉक्स, सफारी अजाक्स अनुरोध} = नया एक्सएमएलएचटीपीआरइवेस्ट ();} कैच (ई) {// इंटरनेट एक्सप्लोरर ब्राउज़र्स {ajaxRequest = new ActiveXObject ("Msxml2.XMLHTTP");} पकड़ो (ई) {try {ajaxRequest = new ActiveXObject ("Microsoft.XMLHTTP");} कैच (ई) {// कुछ गलत चेतावनी ("आपका ब्राउज़र तोड़ दिया!"); वापसी झूठी;}}} // एक बनाएं फ़ंक्शन जो सर्वर से भेजे गए डेटा प्राप्त करेंगे ajaxRequest.onreadystatechange = function () {if (ajaxRequest.readyState == 4) {var ajaxDisplay = document.getElementById ('news'); ajaxDisplay.innerHTML = ajaxRequest.responseText;}} / / Var rssurlvar = $ (this) .attr ("title"); var queryString = "rurl =" + rssurlvar; var urltofile = "rssget.php"; ajaxRequest.open ("पोस्ट", urltofile, सच); ajaxRequ Est.setRequestHeader ("सामग्री-प्र...
Read more

wpf - Custom Message Box Advice -

Well, I'm using a custom window box that comes with some custom control boxes that accompany the text The producers who are displayed are called. I have a defined event, which has been subscribed through the original class, it gets burnt when clicking on the button. However, I can not see how to use it effectively, I would like to return one yes, whether yes or not, but obviously my code will continue to execute, so this Below is some example code to clarify the problem that the method has subscibed by clicking on the button. Message box window Public partial class custom message box: window {public representative message messagebox object sender, event events e); Public event messagebox handler messagebox document; Public Customs Box () {Initial group (); } Public Customsbox (String Message) {InitializeComponent (); This.txtdescription.Text = Message; } Public Customsbox (String Message, String Title, String First BTNtext) {Initialization (); This.lbltitle.Content =...
Read more