css

[k33theod]

Ξέρω ότι αυτά τα θέματα έχουν χιλιοειπωθεί αλλά ...

 

το html μου είναι 

 <div id="two_rows">
        <div id="left_col">
        </div>
        <div id="right_col">
        </div>
    </div>

και το css

#two_rows {
    position:relative;
    width:75%;
    margin: auto;
    font-size: 1.3em;
}

#left_col {
    float:left;
    padding:15px 10px 0 30px;
    width:60%;
    background-color:#EEE9E9;
    min-height:650px;
}

#right_col {
    float:right;
    padding:15px 30px 0 30px;
    background-color: #f5f5f5;
    min-height:650px;
    width:30%;
    margin-left:20px;
}

και σε μικρές οθόνες tablet κινητά παίρνω η δεξιά δηλαδή στήλη κατεβαίνει κάτω

 

[exarhis]

Καλησπέρα.

margin-left:20px;
padding:15px 10px 0 30px;

Το margin και το padding παίζουν ρόλο.

https://jsfiddle.net/fryntr05/

[rafinos]

Μήπως θα βοηθούσε ένα

 

box-sizing: border-box;

 

Και στα δύο elements;

[k33theod]

Ok το βρήκα 

έκανα στο css το parent div display:flex; έσβησα τα flow και δούλεψε 

#two_rows {
    display:flex;
    position:relative;
    width:75%;
    margin: auto;
    font-size: 1.3em;
}

#left_col {
    padding:15px 10px 0 30px;
    width:60%;
    background-color:#EEE9E9;
    min-height:650px;
}

#right_col {
    padding:15px 30px 0 30px;
    background-color: #f5f5f5;
    min-height:650px;
    width:30%;
    margin-left:20px;
}

[sarakinos]

Μπορείς να τα βάλεις σε ένα container όλα και να προσομοιάσεις λίγο αυτό που κάνει και το bootstrap και να παίξει και με floats.

 <div class="container">
        <div id="two_rows">
            <div id="left_col">
                </div>
            <div id="right_col">
                </div>
        </div>
    </div>

.container {
    text-align: center;
    width: 75%;
    margin: 0 auto
}

#two_rows {
    font-size: 1.3em;
    padding: 15px 0;
}

#two_rows:after {
    content: '';
    clear: both;
    display: table;
}

#left_col {
    float: left;
    padding:0 15px;
    width:70%;
    background-color:#EEE9E9;
    height: 650px;
    box-sizing: border-box;
}

#right_col {
    float: left;
    padding:0 15px;
    background-color: #f5f5f5;
    height: 650px;
    width: 25%;
    margin-left: 5%; 
    box-sizing: border-box;
}